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("\r\n")) %>

但它不会处理代码块。

有没有办法为MD文本实现这种预览？

Answer 1

使用markdown.js和/或showdown应该有效。 Here's a StackO with the same question and answer。我个人之前在Ember应用程序中使用showdown来呈现文本的实时预览，因为它正在键入（通过双向数据绑定），并且它可以完美地工作。

在下面的小提琴中，我写了一个Showdown解析器，它接受一个markdown字符串，在换行符上分割它（返回一个标签数组），并遍历数组。在每次迭代时，它会删除标记，检查结果字符串的长度，然后将其与预览的最大字符数进行比较。一旦下一次迭代超过最大字符数，它就会返回预览。 do循环确保您始终至少获得一个hb 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;
  }
});

REVISION

我使用jQuery Truncate更新了函数，将最终字符串剪切为elipses，以便所有预览都与其他预览相同。此外，我意识到原始函数返回了一长串未定义的＆＃39;在没有输入文本的情况下反复进行，因此需要检查以消除它。由于此循环现在将始终返回至少一个html项，因此我将do循环更改为while循环以便于阅读。最后，如果您希望截断始终以字边界结束，请在调用时传递words: true选项。显然，这不会为每个预览提供相同级别的截断，但它会提高易读性。那就是它！

Answer 2

我想分享我的预览版本，showdown.js和prism.js语法高亮非常简单。

Prism.js可以轻松地使用JavaScript和CSS进行语法分析。您只需选择特定语言并将其下载到资源文件夹即可。或者您可以将其指定给特定页面。

这将在实时预览中以表格形式发生。

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

实现降价文本的预览

2 个答案:

REVISION