SyntaxHighlighter高亮插件：TinyMCE/帝国

作者: Dy大叔 | 来源:发表于2018-07-04 22:00 被阅读4次

SyntaxHighlighter 是 Google Code 上的一个开源项目，主要用于给网页前端的代码着色。
Google 的“尿性”，就是一切从简，从实际解决问题，他支持常见的所有语言，而且附送多款皮肤，并且基于HTML和JS，他对Web 2.0 Web 3.0的友好度非常高。

第一步：下载

官方：http://alexgorbatchev.com/
GitHub：https://github.com/syntaxhighlighter/syntaxhighlighter

GitHub的下载方法就不说了吧，有不知道的，在大叔的博客上网盘包，自己去拿吧。

第二步：文件说明

3.0.83版还是在使用引用JS和CSS的方法，3.0.9版开始到最新的 4.0.1版采用了webpack进行打包，大叔还没整明白这个方法的引用方式，网上也没有好用的教程，暂时就先不折腾了。

这里大叔引用 3.0.83版做教程指导。

从GitHub上将文件打包下载下来，解压后，有6个文件夹和1个文件。

image

文件名	文件说明
build	编译文件夹 - 开发使用，我们安装用就不需要它了，删除。
compass	是一个非常丰富的样式框架 - 对SASS的扩展，我们也用不到，删除。
demos	演示文件夹 - 删除
scripts	核心文件夹 - 用于启用和识别对应高亮代码，保留
styles	核心文件夹 - 用于高亮代码的样式展示，保留
tests	测试文件夹 - 删除
.hgignore	忽略文件 - 删除

第三步：安装

清理多余文件

保留 styles 和 scripts 文件夹，其他都删除。

将这两个文件夹，分别放到网站对应样式目录下（可以随意放置，但要保证可以正常读取）。

styles文件夹	scripts文件夹
image	image

核心文件说明

文件名	文件说明
shCore.js	SyntaxHighlighter插件的核心实现文件。根据特殊的 class 配置动态生成常规形式的 html 标签及 class 属性值。包含两个主要对象：XRegExp对象和SyntaxHighlighter对象。
shCore.css	SyntaxHighlighter插件的核心样式文件。控制shCore.js生成的 html 文档的布局、字体等。具体着色由Styles文件夹中的css主题控制，或自定义主题。关系：shCore.css + shThemeDefault.css = shCoreDefault.css
shAutoloader.js	提供一种简单的参数方式。实现根据待着色代码块中使用的 brush 来自动根据autoloader对象配置中的隐射加载 brush.js 。

引入CSS与JS

一般代码高亮的地方都是在文章内容中，所以大叔建议只需要在文章内容展示页的 <body></body> 中引入高亮的CSS与JS即可。
大叔主要对帝国CMS进行，或使用ThinkPHP制作网站，所以这里只对这两种环境进行演示。

ThinkPHP引入方法

<body>
...
  {load href="/*自定义路径*/css/shCore.css" /}
  {load href="/*自定义路径*/css/shThemeDefault.css" /}
  {load href="/*自定义路径*/js/shCore.js" /}
  {load href="..." /}
  <script type="text/javascript">SyntaxHighlighter.all();</script>
...
</body>

帝国CMS引入方法

<body>
...
  <link rel="stylesheet" type="text/css" href="/*自定义路径*/css/shCore.css" />
  <link rel="stylesheet" type="text/css" href="/*自定义路径*/css/shThemeDefault.css" />
  <script type="text/javascript" src="/*自定义路径*/js/shCore.js"></script>
  <script type="text/javascript">SyntaxHighlighter.all();</script>
...
</body>

第四步：配置

配置TinyMCE

因为TinyMCE不兼容SyntaxHighlighter，所以大叔决定还是启用他的codesample控件，然后通过代码转换，让前台用SyntaxHighlighter样式来输出。

启用codesample

<script>
  tinymce.init({
   ...
   //启用codesample
   plugins:[
     ...
     codesample
      ...
    ],
   toolbar1:"... | codesample | ...",
   ...
  });
</script>

编写置换函数

//写一个置换函数，用来将TinyMCE的codesample的样式调整成SyntaxHighlighter样式用
function relcode($relcont) {
  $relcont = str_replace('">< code>', '">', $relcont);
  $relcont = str_replace('< /code>< /pre>', '< /pre>', $relcont);
  $relcont = str_replace('< pre class="brush:', '< pre class="brush:', $relcont);
  $relcont = str_replace('markup', 'html', $relcont);
  echo $relcont;
}

前台输出

<?=relcode($show['content'])?>

帝国CMS方法

大叔在这里的使用方法是以帝国CMS 7.x 为主，用的是 CKEditor v4.0。
王大不知为何，就是不愿意增加【代码录入】功能，所以大叔这里主要是配合【源码】来使用。

使用【源码】编辑

先在正常模式下将要使用高亮样式的代码编辑好，然后点【源码】在外面包入 pre 中，并写上对应的 class 命令：这里放几个常用的

PHP : brush:php

CSS : brush:css

JS : brush:javascript

html : brush:html

Java : brush:java

...对应的代码样式，使用对应的命令

代码不要直接写入后台，先用正常模式写好，因为有一个编辑器中有自动置换功能，使得 html 和 js 代码可以在编辑时也能查看，直接写入后台，会导致文章展示时可看，文章编辑时变成空白行，具体看下面的代码：

**<pre class="brush:php">** 
//写一个置换函数，用来将TinyMCE的codesample的样式调整成SyntaxHighlighter样式用
function relcode($relcont) {
$relcont = str_replace(&#39;&quot;&gt;&lt; code&gt;&#39;, &#39;&quot;&gt;&#39;, $relcont);
$relcont = str_replace(&#39;&quot;&gt;&lt; code&gt;&#39;, &#39;&quot;&gt;&#39;, $relcont);
$relcont = str_replace(&#39;markup&#39;, &#39;html&#39;, $relcont);
echo $relcont;
}
**</pre>**

第五步：样式调整（建议）

因为使用的是 3.0.83版毕竟是2010年的版本，所以样式上还有一些小瑕疵，大叔建议做一些小调整。

调整shCore.css

将这里的三个样式做了一些调整，这样可以使代码在前台展示时，不会出现贴边的情况。

.syntaxhighlighter { /*这里调整代码大框架样式*/
  width: 730px !important;
  margin: 1em 0 1em 18px !important;
  position: relative !important;
  overflow: auto !important;
  font-size: 1em !important;
}
 
.syntaxhighlighter table td.gutter .line { /*这里调整每一行@序列@的展示样式*/
  text-align: right !important;
  padding: 2px 0.5em 2px 1em !important;
}
 
.syntaxhighlighter table td.code .line { /*这里调整每一行@内容@的展示样式*/
  padding: 2px 1em !important;
}

调整：shThemeDefault.css

SyntaxHighlighter自带的共有10个样式，大叔使用了原生的shThemeDefault.css，但原生的样式表没有做行区分，所以大叔自己调整了一下：

.syntaxhighlighter .line.alt1 {
  background-color: #fff !important;
}
.syntaxhighlighter .line.alt2 {
  background-color: #f4f4f4 !important;
}

Dy大叔的日常

读书，摄影，旅行，简单而快乐的慢生活。

微信直接搜索

DYdashuderichang

****或扫描二维码（长按图片识别二维码）****