Javascript 如何让用户使用backticks发布代码片段，并使用GoogleCodePretify显示代码？_Javascript_Css_Code Snippets_Forum

Javascript 如何让用户使用backticks发布代码片段，并使用GoogleCodePretify显示代码？

javascript css

Javascript 如何让用户使用backticks发布代码片段，并使用GoogleCodePretify显示代码？,javascript,css,code-snippets,forum,Javascript,Css,Code Snippets,Forum,我的网站上有一个论坛，人们可以在那里提问并添加回复，主要是关于web开发的，其中包括发布code代码片段我曾经使用过包括stackoverflow在内的论坛，在那里我们可以使用backticks来显示代码。如何在我的站点中实现相同的功能这是我的网站：我还想使用google code prettify，但我必须使用这样的类为每个代码块分配类名class=“prettyprint”，这是不可能的，因为我不是在写文章。用户将通过论坛中的问答发布代码有简单的方法吗？我想至少实现一个功能，使用ba

我的网站上有一个论坛，人们可以在那里提问并添加回复，主要是关于web开发的，其中包括发布

code

代码片段

我曾经使用过包括stackoverflow在内的论坛，在那里我们可以使用backticks来显示代码。如何在我的站点中实现相同的功能

这是我的网站：

我还想使用google code prettify，但我必须使用这样的类为每个代码块分配类名

class=“prettyprint”

，这是不可能的，因为我不是在写文章。用户将通过论坛中的问答发布代码

有简单的方法吗？我想至少实现一个功能，使用backticks来显示代码，这样我就不必使用tinymce，因为tinymce对用户不友好，而且可能存在安全风险。

三个backticks（````是定义代码片段的标记语法。因此，要使用backticks语法，您需要一个标记解析器，如

marked

（），它将标记字符串解析为html

例子 Jsbin示例：

添加高亮度照明代码： Html

三个倒勾（````是定义代码片段的标记语法。因此，要使用backticks语法，您需要一个标记解析器，如

marked

（），它将标记字符串解析为html

例子 Jsbin示例：

添加高亮度照明代码： Html

你需要一些代码，当然-你对你想要实现的任何部分有任何想法吗？我想以充满颜色的崇高文本的方式显示代码，目前如果你访问我发布到我的网站的链接，你所看到的是红色的代码，引导默认。它不可读。代码将由用户使用文本区提交，文本区也将包含纯文本。如果您访问链接-是的，不，这不会发生，也不相关。您需要一些代码，当然-你对你想要实现的任何部分有什么想法吗？我想以充满色彩的崇高文本的方式显示代码，目前如果你访问我发布到我的网站的链接，你看到的所有代码都是红色的，引导默认。它不可读。代码将由用户使用文本区提交，文本区也将包含纯文本。如果您访问链接-是的，不，这不会发生，也不相关

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

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

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

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

inputElement.addEventListener('keyup', function(e) {
    var html = marked(e.target.value);
    outputElement.innerHTML = 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>

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);
        }
    });
});