TinyMCE插件:Prism.js 代码高亮 安装及配置

发布于 2018年11月21日 16:29:47 - 技术分享 - Web - TinyMCE

大叔前段时间在逛TinyMCE的官方推荐插件时,无意间发现了Prism,和Google-code-prettify一样好用,但是它和TinyMCE的契合度更高。

所以大叔果断换下了Google-code-prettify,用上了最新的Prism。

250483209819f59185e87440a7499832

安装

前台样式展示安装

Prism的安装过程非常简便,首先进入官网

按上图的选择如下:

  •  Compression level 
    • 选择:Minified version(迷你代码,网站使用越小加载越快)
  •  Core 
    • 默认打勾
  •  Themes 
    • 推荐:Okaidia(皮肤不晃眼,刚刚好)
  •  Languages (建议选择需要什么勾什么,毕竟加载都需要时间)
    • Markup(html)
    • CSS
    • C-like
    • JavaScript
    • PHP
    • Git
    • ...
  •  Plugins 
    • Copy To Clipboard Button(这个强烈推荐,点一下自动保存代码,CSDN都用它)
    • ...

99bb78c449ac069a9f4ec338bbbd415d

分别将prism.jsprism.css下载下来,放入样式文件夹中

在内容页分别入这两个文件

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

后台TinyMCE功能开启

在TinyMCE插件区和功能区分别要开启:codesample

tinymce.init({
    ...
    selector: "textarea",
    plugins: "codesample",
    toolbar: "codesample"
    ...
});

现在可以愉快输入代码了


感谢:

网盘地址 密码:官网下载

解压密码:http://xdy.me | www.xdy.me

本站所有软件仅供学习使用,请在24小时内删除,本站不承担任何相关责任!

转载声明:本站文章无特别说明,皆为原创,版权所有,转载请注明:Dy大叔的日常

转载自 TinyMCE插件:Prism.js 代码高亮 安装及配置 | XDY.ME@Dy大叔的日常

XDY.ME@Dy大叔的日常