Question

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

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

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

if(isset($_POST['g-recaptcha-response'])){$captcha=$_POST['g-recaptcha-response'];}
$secretKey = "[Private_Key]";
$ip = $_SERVER['REMOTE_ADDR'];
$response=file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=".$secretKey."&response=".$captcha."&remoteip=".$ip);
$responseKeys = json_decode($response,true);

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

var_dump($responseKeys);

PS：SO解析它，通常上面的标签div标签包含在：

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

请问我该怎么办？

Answer 1

当内容加载到＆＃34;常规＆＃34;您需要确定两件事的网页：

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突出显示代码示例

1 个答案: