javascript - block 代码预览

Question

拜托，我创建了一个文本区域预览，就像 stackoverflow 一样，可以立即显示您键入的文本。我相信我做对了。现在我还知道如何启用内联代码(例如这是一个内联代码)，我已经完成了并且它工作得很好。这是我的代码:

$("#comment").keyup(function(){
if($(this).val() == ""){
   $('#preview').css('display','none');
}else{
   $('#preview').css('display','block');
}
// $("#preview").html($(this).val());
$("#preview").text($(this).val()); // If you want html code to be escaped
$("#preview").html($("#preview").html().replace(/`(.*?)`/g, "<span><code class='inline_code'>$1</code></span>"));
getting = document.getElementByTagName("code").html;
$("code").text(getting);
});

现在我想对 block 代码使用相同的方法(例如)

this is a block code

所以我在.replace行下面添加了这行代码，这次替换了4个空格，但仅在开头

$("#preview").html($("#preview").html().replace(/    (.*?)/g, "<span><code class='block_code'>$1</code></span>"));

但它只是像普通文本一样显示，而没有应用我的 css 样式。所以我还在最后添加了另外 4 个空格

$("#preview").html($("#preview").html().replace(/    (.*?)    /g, "<span><code class='block_code'>$1</code></span>"));

这次它可以工作，但我不希望末尾有 4 个空格。我只希望它出现在开头，这样我就不必给出 4 个空格来结束代码。

总之，我只希望我的文本区域和预览像 stackoverflow 一样工作。如果需要的话，这是我的 html:

<textarea name="comment" id="comment" class="textarea"></textarea>
<div id="preview" class="preview"></div>

Answer 1

我已经得到了我的问题的解决方案，我也给出了这个问题的答案question

这里我做了一些看起来很像 stackoverflow 的元素。虽然与 stackoverflow 不是 100% 相同，但至少它具有 stackoverflow 的大部分功能，您可以在这里查看( http://stack.stephensangkn.org )。但我故意发出图像上传，因为它与服务器有关。我觉得这很酷。页面中还可以看到下载链接，可以下载源码