zoukankan      html  css  js  c++  java
  • 用 highlight.js 为文章中的代码添加语法高亮

    来源:http://www.ghostchina.com/adding-syntax-highlighting-to-ghost-using-highlight-js/

    -------------------------------------------------------------------------------------

    如果我们的文章中包含了代码,Ghost 默认是不做处理的,也就是说:没有为代码增加语法高亮。

    其实,这个问题可以从 Ghost 系统入手解决,可惜现在 Ghost 还不支持插件,如果直接修改 Ghost 系统的话,每次系统升级都会很麻烦;那么,我们只好在页面上解决这个问题了,也就是为主题(theme)增加语法高亮的支持,在这里,我们以 Ghost 的默认主题(theme)-- Casper -- 为例,语法高亮插件采用 highlight.js 。

    先来看看 highlight.js 有什么能力吧:

    • 支持 71 种编程语言的语法解析;拥有 44 种样式
    • 自动检测编程语言
    • 同时为多种编程语言代码高亮
    • 可以在 node.js 平台上运行
    • 支持各种标签
    • 与任何 js 框架兼容

    OK,接下来就看看怎么用 hightlight.js 吧!

    引入 highlight.js 文件

    我们需要在页面中同时引入一个 js 文件和一个 css 文件(在这里我们省点儿力气,直接使用 Bootstrap中文网 提供的 CDN 链接,既简单又提升加载速度):

    <link href="http://cdn.bootcss.com/highlight.js/8.0/styles/monokai_sublime.min.css" rel="stylesheet">  
    <script src="http://cdn.bootcss.com/highlight.js/8.0/highlight.min.js"></script>  
    

    第一个文件是样式文件,我们采用 sublime 编辑器类似的样式;第二个文件是 highlight.js 的核心文件,就是它解析代码的。

    在添加这两个文件的时候,我们还是按老规矩,将 CSS 文件添加到 <head> 中,将 js 文件添加到页面底部 </body> 标签前面,这样就完成了 highlight.js 的引入。

    注:你可以在本页面点击右键 -> 查看源码,找到上面提到的两个文件,然后照葫芦画瓢就行。

    让代码高亮吧

    前面的准备工作做完了,现在还有最后一步,就是:调用 hihglight.js 解析代码,完成高亮工作。

    在 <script src="http://cdn.bootcss.com/highlight.js/8.0/highlight.min.js"></script> 标签下面加入如下代码:

    <script >hljs.initHighlightingOnLoad();</script>  
    

    这样,highlight.js 就会自动寻找 < pre><code></code></pre > 代码块并完成代码高亮了!

    书写 markdown 时的注意事项

    对于大段的代码建议采用 gfm 格式,如下:

        ```
        这里放代码
        ```
    

    highlight.js 可以自动识代码所用的编程语言,但是,电脑不如人脑啊!识别错误的几率很高,所以,为了安全起见,最好标识一下所用的编程语言,例如:

        ```html
        <DOCTYPE html>
        <html>
        </html>
        ```
    

    前面说过,highlight.js 支持 71 种编程语言(完整列表看这里),既包括常见的 C、java、javascript、ruby、python、html、css等,还支持 apache、nginx 这些配置文件的语法,所以,在你书写这些代码的时候,可以看看 highlight.js 是否支持所用的语法,然后标注对应的语言,让 highlight.js 完美的对其高亮显示吧。

    特别提醒

    本页面中的代码高亮就是上面的方式哦,直接开启浏览器的调试工具研究吧!

  • 相关阅读:
    vue 倒计时返回首页
    vue2借助animate.css实现路由动画效果
    CSS3实现文本垂直排列
    button在点击时出现边框
    vue项目中设置背景图片
    Python -处理PDF
    Python学习笔记(1)-列表
    转:Redis 的安装配置介绍
    转:windows xp下如何安装SQL server2000企业版
    转:CodeCube提供可共享、可运行的代码示例
  • 原文地址:https://www.cnblogs.com/jiemao/p/4864326.html
Copyright © 2011-2022 走看看