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

Question

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

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

出于这个原因，我使用了 prismjs，因为 default TinyMCE 使用它。我能够直接使用 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>

请问我该怎么办？

Answer 1

在 "regular" 网页上加载内容时，您需要确保两件事：

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 搜索整个页面并对任何代码示例施展魔法。

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

How to highlight code samples through AngularJS using Prismjs and TinyMCE

angularjs

tinymce

highlight

tinymce-4

prism.js