如何使用 Prismjs 和 TinyMCE 通过 AngularJS 突出显示代码示例答案

【问题标题】：How to highlight code samples through AngularJS using Prismjs and TinyMCE如何使用 Prismjs 和 TinyMCE 通过 AngularJS 突出显示代码示例
【发布时间】：2017-02-05 16:30:28
【问题描述】：

我的 Angular 应用程序中有一个 tinyMCE 插件，用户可以在其中将代码插入 mysql 数据库。

我想突出显示从我的数据库中检索到的那些插入代码。

出于这个原因，我使用了 prismjs，因为 TinyMCE 使用它 default。我可以直接使用 TinyMCE 自定义和突出显示代码示例。但是一旦插入数据库并检索它进行显示，尽管我在 index.html 中也导入了 prism.css 和 prism.js，但代码示例无法突出显示：

<!DOCTYPE html>
<html>
    <head>
        <link href="prism.css" rel="stylesheet" />
        //...
    </head>
    //...
    <body>
         //...
        <script src="angular_1_6.min.js"></script>
        <script src="MyCtrl.js"></script>
        <script src="prism.js"></script>
     </body>
</html>

这是我的数据库中的结果字符串示例：

<pre class="language-markup"><code>&lt;div class="alert alert-danger" id="question-error" role="alert" ng-if="showQuestionError"&gt;
        &lt;button type="button" class="close" data-dismiss="alert" aria-label="Close" ng-click="showQuestionError=false"&gt;
            &lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;
        &lt;/button&gt;
        &lt;strong&gt;Erreur ! Merci de v&eacute;rifier que le titre de la question : &lt;/strong&gt;
        &lt;ul &gt;
            &lt;li&gt;Se termnine par un point d'interrogation (?).&lt;/li&gt;
            &lt;li&gt;Ne d&eacute;passe pas 150 caract&egrave;res.&lt;/li&gt;
            &lt;li&gt;Et n'est pas vide.&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/div&gt;</code></pre>

PS: SO 解析它，通常上面的标签 div 标签被：

<pre class="language-markup"></pre>

请问我该怎么办？

【问题讨论】：

请添加您从数据库接收到的结果字符串。
完成，请参阅编辑 ????????????
我相信您需要将数据作为非转义字符串插入到 TinyMCE 中。你试过吗？
是的，我想。事实上，在 TinyMCE 工具栏中有一个按钮可以让我们添加代码（codesample），然后它会突出显示它。
我说的是您从错误所在的数据库中检索到的数据。将其作为非转义字符串添加到 TinyMCE 中。

标签： angularjs tinymce highlight tinymce-4 prism.js

【解决方案1】：

在“常规”网页上加载内容时，您需要确保两件事：

Prism 的文件已加载到页面上
您告诉 Prism 搜索作为代码示例的页面和标记内容。

这里讨论第一部分：

https://www.tinymce.com/docs/plugins/codesample/#usingprismjsonyourwebpage

具体来说你需要在页面上有一个CSS和JS文件：

<link rel="stylesheet" type="text/css" href="prism.css">
<script src="prism.js"></script>

如果您在加载要突出显示的 HTML 之前在页面上有这个，那么您需要做的就是全部。如果您正在动态加载代码，您可以手动告诉 Prism 在页面中搜索要标记的代码：

http://prismjs.com/extending.html#api

Prism.highlightAll() 命令将告诉 Prism 搜索整个页面并对任何代码示例施展魔法。

【讨论】：

太棒了！它真的超级棒????谢谢