在使用 TinyMCE 的 codesample 插件时，编辑器内输入的代码片段可以通过 Prism.js 实现语法高亮显示。然而，保存后在前端页面上显示代码时，默认情况下代码不会自动高亮，因为 TinyMCE 的 codesample 插件仅在编辑器内部处理高亮，保存后的 HTML 内容需要额外的配置来确保前端页面也能正确渲染高亮效果。以下是实现保存后页面代码高亮显示所需的配置步骤：
1. 确保包含 Prism.js 和 Prism.css
TinyMCE 的 codesample 插件依赖 Prism.js 来实现语法高亮。保存后的页面需要加载 Prism.js 和对应的 CSS 文件，以便在前端正确渲染高亮效果。你需要在页面的 <head> 标签中引入这两个文件：
<head>
<!-- Prism CSS -->
<link href="path/to/prism.css" rel="stylesheet" />
<!-- Prism JS -->
<script src="path/to/prism.js"></script>
</head>-
下载 Prism.js：你可以从 Prism.js 官网 下载所需的 JS 和 CSS 文件，并根据需要选择支持的语言和主题。
CDN 方式：或者直接使用 CDN，例如：
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>2. 检查保存的 HTML 结构
TinyMCE 的 codesample 插件会将代码片段保存为 <pre><code> 结构，并添加语言类（例如 language-javascript）。保存后的 HTML 通常如下：
<pre class="language-javascript"><code>console.log("Hello, world!");</code></pre>确保你的后端保存和前端渲染逻辑不会破坏这一结构（例如，某些系统可能会转义 < 和 >，导致代码无法正确显示）。如果使用 PHP，可以用 htmlspecialchars_decode() 或类似方法还原原始 HTML。
3. TinyMCE 配置（可选优化）
为了确保保存的内容与前端显示一致，可以在 TinyMCE 初始化时做一些优化配置：
tinymce.init({
selector: "textarea",
plugins: "codesample",
toolbar: "codesample",
codesample_languages: [
{ text: "HTML/XML", value: "markup" },
{ text: "JavaScript", value: "javascript" },
{ text: "CSS", value: "css" },
{ text: "Python", value: "python" }
],
// 可选：使用全局 Prism.js，而不是插件内置版本
codesample_global_prismjs: true
});-
codesample_global_prismjs: true：告诉 TinyMCE 使用页面加载的 Prism.js，而不是插件内置的版本。这样可以确保编辑器和前端页面使用相同的 Prism.js 版本，避免样式或功能不一致。
4. 自定义 Prism.js 主题（可选）
Prism.js 提供多种主题（例如 prism-okaidia.css、prism-dark.css），你可以在下载时选择喜欢的主题，并在页面中替换默认的 prism.css：
<link href="path/to/prism-okaidia.css" rel="stylesheet" />确保 TinyMCE 和前端使用的主题一致。如果需要自定义，可以在 TinyMCE 初始化时指定：
tinymce.init({
// ...其他配置
codesample_content_css: "path/to/prism-okaidia.css"
});5. 处理动态加载内容（可选）
如果页面内容是通过 AJAX 或其他动态方式加载的，Prism.highlightAll() 可能无法及时处理新添加的代码块。这时需要针对新内容调用 Prism.highlightElement()：
// 假设 newCodeElement 是新加载的 <pre><code> DOM 元素
Prism.highlightElement(newCodeElement);完整示例
以下是一个完整的 HTML 示例，展示保存后页面如何显示高亮的代码：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>代码高亮示例</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css" rel="stylesheet" />
</head>
<body>
<!-- 假设这是 TinyMCE 保存后的内容 -->
<pre class="language-javascript"><code>console.log("Hello, world!");</code></pre>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
</body>
</html>注意事项
-
语言支持：确保 Prism.js 包含你需要的语言支持。如果默认包不支持某种语言（例如 Go 或 Rust），需要在 Prism.js 下载页面勾选对应语言插件，并重新生成 prism.js。
-
调试：如果高亮未生效，检查浏览器开发者工具（F12），确认 <pre class="language-xxx"> 是否存在，以及 Prism.js 是否正确加载。
通过以上配置，保存后的页面就能正确显示带有语法高亮的代码了！