美文网首页
Ghost加入Prism高代高亮显示

Ghost加入Prism高代高亮显示

作者: 陶清清 | 来源:发表于2016-09-28 11:34 被阅读356次

    常见的代码高亮显示的框架有Prism和highlight.js,highlight以前使用过,略微显得有点麻烦,然后这次选择时,看了下prism,感觉使用似乎更为简单。而关于兼容性,我觉得:

    不用chrome的开发,不是一个好程序员。

    所以,兼容性作为一个技术类博客来说,基本不要多考虑。

    下面来看看,ghost中,如何加入prism。

    1. 访问官网生成css和js文件

    官网链接:http://prismjs.com/download.html

    主要有三个选项:

    1. 选择主题
    2. 选择需要支持高亮的语言
    3. 选择需要的插件

    主题可以自己预览,然后选择自己喜欢的主题。其他的,如果有选择纠结症的同学,可以直接全选。坏处是,就是生产的js和css大一点而已嘛:)

    2. 下载prism css和js文件

    选择完毕之后,点击下面2个大按钮:Download JS Download CSS ,然后会下载得到两个文件:

    prism.css
    prism.js
    

    将prism.css放在主题文件夹的assets/css/目录中,将prism.js放到assets/js/目录中。

    3. 修改模板代码

    在主题文件夹中,找到default.hbs打开,在</head>加入以下代码

    {{# if post}}
        <link rel="stylesheet" type="text/css" href="/assets/css/prism.css" />  
    {{/if}}
    

    然后找到post.hbs打开,在{{/post}}后面加入下面代码

    <script src="/assets/js/prism.js" type="text/javascript"></script>
    

    4. 重启ghost服务

    重启ghost服务,然后就大功告成来。

    5. 平时如何使用

    例如,我们要让一段java代码高亮显示,则按如下方式写:

    ```java
    public class Test{
    //.......
    }
    # ``` //把#号去掉,这里是因为避免转义,所以加了个#号
    

    相关文章

      网友评论

          本文标题:Ghost加入Prism高代高亮显示

          本文链接:https://www.haomeiwen.com/subject/vzvhyttx.html