Hot For Coding

一步步教你使用SyntaxHighlighter高亮插件

SyntaxHighlighter是一款众多网站首选使用的高亮插件,网上有许多教程由于是讲到了跟编辑器的搭配使得原本简单易用的插件变成非常复杂,其实这款插件使用方法非常的简单,只需跟着教程一步步即可实现高亮。

下载插件

下载地址

https://github.com/syntaxhighlighter/syntaxhighlighter

解压提取高亮JS文件与CSS样式文件

选中scripts目录与styles目录

full

复制到桌面syntax文件夹中

full

使用插件

创建demo.html文件

full

demo.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>一步步教你使用SyntaxHighlighter高亮插件 - 琼台博客</title>
    <script type="text/javascript" src="scripts/shCore.js"></script>
    <script type="text/javascript" src="scripts/shBrushPhp.js"></script>
    <link type="text/css" rel="stylesheet" href="styles/shCoreDefault.css"/>
    <script type="text/javascript">SyntaxHighlighter.all();</script>
  </head>
  <body>
    <h3>一步步教你使用SyntaxHighlighter高亮插件 - 琼台博客</h3>
    <pre class="brush: php;">
      <?php
      function say($say){
        return trim($say);
      }
      $str = "这里是PHP高亮代码";
      echo say($str);
      ?>
    </pre>
  </body>
</html>

运行结果

full

最后

通过以上的例子,我们发现使用SyntaxHighlighter这个插件并不难,只是加载JavaScript与CSS文件即可,并不需要复杂的安装。

以上DEMO中

  • shCore.js是必须加载的主要JS文件
  • shBrushPhp.js文件是PHP语法高亮 SyntaxHighlighter在scripts文件夹里准备了很多语法高亮文件,如CSS,JS,XML/HTML等等,可实际中根据自己需要加载
  • shCoreDefault.css是高亮样式,SyntaxHighlighter在styles文件夹里同样准备了很多高亮样式,可根据喜好设置。
分享

TITLE: 一步步教你使用SyntaxHighlighter高亮插件

LINK: https://www.qttc.net/116-teach-you-how-to-use-syntaxhighlighter.html

NOTE: 原创内容,转载请注明出自琼台博客