如何让用户张贴代码片段使用反引号和显示代码使用谷歌代码预置

how to let users post code snippets using backticks and display code using google code preetify?

本文关键字：代码 显示 谷歌 张贴 片段 用户      更新时间：2023-09-26

我在我的网站上有一个论坛，人们可以在那里提问和回复，主要是关于web开发的，包括发布code片段。

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

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

我也想使用谷歌代码美化，但我必须分配类名称为每个代码块使用类像这样的class="prettyprint"这是不可能的，因为我不写文章。用户将通过论坛的问答区发布代码。

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

三个反引号(' ' ')是定义代码片段的标记语法。因此，要使用反引号语法，您需要一个markdown解析器，如marked (https://github.com/chjj/marked)，它将把markdown字符串解析为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);
        }
    });
});
相关文章：