Question

我的网站上有一个论坛，人们可以提出问题并添加回复，主要是关于包含发布code摘要的网页开发。

我使用过包含stackoverflow的论坛，我们可以使用反引号来显示代码。如何在我的网站中实现相同的功能？

这是我的网站：http://kaloraat.com/questions/how-to-redirect-user-after-password-reset-in-laravel

此外，我想使用谷歌代码美化，但我必须使用像class="prettyprint"这样的类为每个代码块分配类名，这是不可能的，因为我不写文章。用户将通过论坛中的Q＆amp; A发布代码。

有一种简单的方法吗？我想至少实现一个功能，使用反引号来显示代码，这样我就不必使用不是用户友好的tinymce，也可能存在安全风险。

Answer 1

三个反引号（```）是markdown语法，它定义了一段代码。因此，要使用反引号语法，您需要一个降价解析器，如marked（https://github.com/chjj/marked），它会将降价字符串解析为html。

实施例

var markdownString = "```var foo = 'bar';";
var output = marked(markdownString);

console.log(output); //<pre>var foo = 'bar';</pre>

建议

HTML

<body>
    <textarea id="content" cols="60" rows="20"></textarea>
    <hr />
    <h3>Output</h3>
    <div id="output"></div>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.6/marked.min.js"></script>
</body>

JS

var inputElement = document.getElementById('content');
var outputElement = document.getElementById('output');

inputElement.addEventListener('keyup', function(e) {
    var html = marked(e.target.value);
    outputElement.innerHTML = html;
});

Jsbin示例：http://jsbin.com/yezinorari/edit?html,js,output

添加高亮度代码：

HTML

<head>
    <!-- highlight.js css-file -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.6.0/styles/default.min.css">
</head>
<body>
    <textarea id="content" cols="60" rows="20"></textarea>
    <hr />
    <h3>Output</h3>
    <div id="output" class="prettyprint"></div>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.6/marked.min.js"></script>

    <!-- Added highlight.js -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.6.0/highlight.min.js"></script>

</body>

JS

var inputElement = document.getElementById('content');
var outputElement = document.getElementById('output');

inputElement.addEventListener('keyup', function(e){
    var html = marked(e.target.value);
    outputElement.innerHTML = html;

    //for each node which is of type pre element
    //add code highlight.
    outputElement.childNodes.forEach(function(node) {
        if(node.tagName && node.tagName === 'PRE') {
            hljs.highlightBlock(node);
        }
    });
});

如何让用户使用反引号发布代码片段并使用google code preetify显示代码？

1 个答案:

实施例

建议

添加高亮度代码：