为降价文本实现预览

Question

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

它像魅力一样工作，允许将 markdown 文本转换为 HTML 就像

一样简单

<%= markdown some_text_variable %>

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

以下天真的构造

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

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

我想出了

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

但它不处理，例如，代码块。

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

Answer 1

使用markdown.js and / or showdown should work. Here's a StackO with the same question and answer。我个人之前在 Ember 应用程序中使用过 showdown 来呈现正在键入的文本的实时预览（通过 2 向数据绑定），并且它工作得非常完美。

在下面的 fiddle 中，我写了一个小的 Showdown 解析器，它接收一串 markdown，将其拆分为一个换行符（returns 一个标签数组），然后遍历大批。在每次迭代中，它都会删除标签，检查结果字符串的长度，然后将其与预览的最大字符数进行比较。一旦下一次迭代超过最大字符数，它 return 就是预览。 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;
  }
});

修订

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

Answer 2

我想分享我的预览版，使用 showdown.js and 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>

为降价文本实现预览

Implementing preview for markdown text

ruby

markdown

ruby-on-rails

redcarpet

修订