0

我正在开发 Ruby on Rails 项目，我已经使用redcarpet gem 为我的项目中的一些文本描述实现了 markdown 语法。

它就像魅力一样，允许将降价文本转换为 HTML，就像

<%= markdown some_text_variable %>

但现在我想实现预览功能渲染只是全文的一小部分。

以下幼稚构造

<%= markdown some_text_variable[0..preview_length] %>

不起作用，因为它很容易分解 MD 语法，从而导致结构混乱（想象一下，例如，在图像链接的一半上分割原始字符串）。

我想出了

<%= markdown some_text_variable[0..preview_length].split(/\r?\n/)[0..-2].join("\r\n")) %>

但它不涉及例如代码块。

有什么方法可以为 MD 文本实现这种预览？

4

2 回答 2

3

使用markdown.js和/或摊牌应该可以工作。这是具有相同问题和答案的 StackO。我个人之前曾在 Ember 应用程序中使用过摊牌来呈现正在输入的文本的实时预览（通过 2 路数据绑定），并且它完美地工作。

在下面的小提琴中，我写了一个小摊牌解析器，它接收一个 markdown 字符串，在换行符上拆分它（返回一个标签数组），然后遍历数组。在每次迭代中，它会删除标签，检查结果字符串的长度，然后将其与预览的最大字符数进行比较。一旦下一次迭代超过最大字符数，它就会返回预览。do 循环可确保您始终获得至少一个 html blob 作为预览。

小提琴

$(function() {
  var converter = new Showdown.converter();
  var previewMax = 200;

  $('button').click(function() {        
    var content = $('#markdown').val(),
        charCount = 0,
        i = 0,
        output = '';

    if (!content) {
      return $('div.preview').html("Please enter some text.");
    }

    var mark = converter.makeHtml(content);
    var mark_arr = mark.split('\n');

    while (charCount < previewMax) {
      var html = mark_arr[i];
      var text = htmlStrip(html);            

      if ((charCount + text.length) > previewMax) {
        var overflow = (charCount + text.length) - previewMax;
        var clipAmount = text.length - overflow;
        html = jQuery.truncate(mark_arr[i], { length: clipAmount });
        }

      output += html;
      charCount += text.length;
      i++;
    };

    $('div.preview').html(output);
    $('div.full').html(mark);
  });

  function htmlStrip (html) {
    var div = document.createElement('div');
    div.innerHTML = html;
    var text = div.textContent || div.innerText || "";
    return text;
  }
});

修订

我使用jQuery Truncate更新了函数，将最终字符串切割成省略号，这样您的所有预览都与其他预览的长度相同。另外，我意识到当没有输入文本时，原始函数一遍又一遍地返回一个长字符串 undefined'，所以有一个检查来消除它。由于这个循环现在总是会返回至少一个 html 项，我将 do 循环更改为 while 循环以便于阅读。最后，如果您希望截断始终以单词边界结尾，words: true请在调用时传递该选项。显然，这不会为每个预览提供相同级别的截断，但会提高易读性。就是这样！

于 2015-03-18T13:34:24.997 回答
3

I want to share my preview version it was quite simple with showdown.js and prism.js syntax highlighting.

Prism.js is syntaxing easily with JavaScript and CSS. All you need to pick specific languages and download it to assets folder. Or you can specify it to specific pages.

This is going to happen in realtime preview, in a form.

In Rails form:

<div class="col-md-12">
  <div class="form-group">
    <%= f.label :body %>
    <%= f.text_area :body, class: "form-control", rows: 10 %>
  </div>
</div>


<div class="col-md-12">
  <h1> Preview Markdown </h1>
  <div class="form-group markdownOutput"></div>
</div>

And add this script right below a form page.

<script>
function mkdown(){
  var converter  = new showdown.Converter(),
      $post_body = $("#post_body");

  // This line will keep adding new rows for textarea. 
  function postBodyLengthDetector(post_body){
    var lines = post_body.val().split("\n");
    post_body.prop('rows', lines.length+5);
  }


  // Textarea rows in default '10', when focusing on this. It will expand. 
  $post_body.focus(function(){
    postBodyLengthDetector($(this));
    $('.markdownOutput').html(converter.makeHtml($post_body.val()));
  });

  // All simple magic goes here, each time when texting anything into textarea
  //it will be generated to markdown. You are able to see preview right below of textarea.
  $post_body.keyup(function() {
    postBodyLengthDetector($(this));
      var value = $( this ).val(),
          html  = converter.makeHtml(value);
          $('.markdownOutput').html(html);
  });
}
$(mkdown);
$(document).on("turbolinks:load", mkdown);
</script>
于 2016-04-26T22:49:41.097 回答