实现标记文本的预览

Question

我正在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("rn")) %>

但它不处理例如代码块。

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

Answer 1

使用markdown.js和/或决战应该有效。这是一个有着相同问题和答案的StackO。我个人以前在Ember应用程序中使用过摊牌，在键入文本时（通过双向数据绑定）实时预览文本，效果完美。

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

Fiddle

$(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;
  }
});

---

修订

我使用jQueryTruncate更新了这个函数，将最后一个字符串剪切成一个elipses，这样所有预览的长度都与其他预览相同。此外，我意识到，当没有输入文本时，原始函数会反复返回一个长字符串"undefined"，所以有一个检查可以消除这一点。由于这个循环现在总是返回至少一个html项目，为了更容易阅读，我将do循环更改为while循环。最后，如果您希望截断始终以单词边界结束，请在调用words: true选项时传递该选项。显然，这不会为每次预览提供相同级别的截断，但会提高易读性。就是这样！

Answer 2

我想分享我的预览版本——使用showdown.js和prism.js语法高亮显示非常简单。

Prism.js可以很容易地与JavaScript和CSS进行语法组合。您只需要选择特定的语言并将其下载到assets文件夹中。也可以将其指定给特定页面。

这将以实时预览的形式发生。

在Rails形式中：

<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>

并将此脚本添加到表单页面的正下方

<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>