几款代码高亮组件的体验,说不定你以后会用到

2020-04-23   阅读(51)  

最近准备给自己的博客网站上一个新的模块,但是看到博客在 ios 端浏览是这个样子!

顿时觉得浑身难受...

 

用 safari 排查了下原因,后台输出的是不带样式的 html pre code 标签,锅是代码高亮插件的。

我的博客站点用的是 Highlight js 库,ir_black 主题,在 mac 的 safari 和 ios 端访问代码,不会出现横向滚动条,代码满一行就提前换行。

 

于是又找了两款代码高亮前端组件库,SyntaxHighlighter、Prism。经过实验,SyntaxHighlighter 跟我网站样式有冲突,Prism 符合我的要求也能解决上面的问题。Prism 效果如下:

这下舒服了,可以安心准备我的新模块了,不然页面都不好意思拿出去推。

 

附一下这三款代码高亮组件的资源信息:

我用的第一款 Highlight.js,能够自动识别代码语言种类,几十种主题。

官网:https://highlightjs.org/

使用示例:

<html>
<head>
  <link href="https://cdn.bootcss.com/highlight.js/9.18.1/styles/ir-black.min.css" rel="stylesheet">
  <script src="https://cdn.bootcss.com/highlight.js/9.18.1/highlight.min.js"></script>
  <script>hljs.initHighlightingOnLoad();</script>
</head>
<body>
  <pre>
    <code class="language-java">
public class ConstXiong {
​
  public static void main(String[] args) {
    System.out.println("World, Hello");
  }
}
    </code>
  </pre>
</body>
</html>

效果:

第二款 SyntaxHighlighter,使用简单,但右上角有个问号且首行距离顶部的距离有点小,懒得再看文档进行调整了。

官网:http://alexgorbatchev.com/SyntaxHighlighter/

使用示例:

<html>
<head>
  <link href="https://cdn.bootcss.com/SyntaxHighlighter/3.0.83/styles/shThemeEmacs.min.css" rel="stylesheet">
  <script src="https://cdn.bootcss.com/SyntaxHighlighter/3.0.83/scripts/shCore.min.js"></script>
  <script src="https://cdn.bootcss.com/SyntaxHighlighter/3.0.83/scripts/shBrushJava.min.js"></script>
</head>
<body>
  <pre class="brush: java">
public class ConstXiong {
​
  public static void main(String[] args) {
    System.out.println("World, Hello");
  }
}
  </pre>
​
<script type="text/javascript">
     SyntaxHighlighter.all()
</script>
</body>
</html>

效果:

 

第三款  Prism,比较轻量级,使用也挺简单,css 调整下 code 标签的字体大小就符合我的审美。

官网:https://prismjs.com/

使用示例:

<html>
<head>
  <link href="https://cdn.bootcss.com/prism/1.20.0/themes/prism-okaidia.css" rel="stylesheet">
</head>
<body>
  <pre>
    <code class="language-java">
public class ConstXiong {
​
  public static void main(String[] args) {
    System.out.println("World, Hello");
  }
}    </code>
  </pre>
​
<script src="https://cdn.bootcss.com/prism/1.20.0/prism.min.js"></script>
<script src="https://cdn.bootcss.com/prism/9000.0.1/components/prism-java.min.js"></script>
</body>
</html>

效果:


还有一些其他代码高亮组件,有兴趣也可以试试:

  • Google 的 Code Prettify
  • jQuery.Syntax
  • DlHighlight
  • Rainbow

 

具体可以参考:

http://www.codeceo.com/article/7-javascript-highlighte-plugin.html

 

弱水三千,只取一瓢...

 

ConstXiong 备案号:苏ICP备16009629号-3