插件 \ codesample 代码示例插件提供代码高亮功能用于在内容区展示程序源代码
+toolbar按钮+menu项

此页更新时间:2019-03-25 20:34

此页英文文档:https://www.tiny.cloud/docs/plugins/codesample/

此插件适合程序员编写技术类文章时,展示高亮源码。

默认codesample自动使用prism.js将代码示例嵌入编辑器中。也就是说,当用户将有效代码复制编辑区域时,将根据Prism.js默认的CSS规则自动格式化。

在非编辑器环境展示代码示例,需要自行在当前页面引入prism.js和prism.css两个文件,这两个文件可到prism官网下载,官网还很贴心地提供了配色方案DIY功能。
tinymce.init({
    selector: '#tinydemo',
    plugins: "codesample",
    toolbar: "codesample",
});

额外选项

codesample_languages

设置编程语言下拉列表中项目。

codesample_content_css

指定在将代码示例插入编辑器内容区时,加载自定义的css文件。

例:

tinymce.init({
    selector: '#tinydemo',
    plugins: "codesample",
    toolbar: "codesample",
    codesample_languages: [
        {text: 'HTML/XML', value: 'markup'},
        {text: 'JavaScript', value: 'javascript'},
        {text: 'CSS', value: 'css'},
        {text: 'PHP', value: 'php'},
    ],
    codesample_content_css: '/static/prism.css',
});

下一节:directionality 文字方向