Google Prettify Code

阅读量: 343 编辑

Google Prettify Code

使用Google Prettify Code 实现 MarkDown文档代码高亮显示,让代码更易阅读

一、引入prettify的js和css文件

下载链接:https://pan.baidu.com/s/18Ne8Syk7mZkhqx2rTQLm3w 
提取码:o3py

二、在页面中引入对应的文件

<script type="text/javascript" src="/static/js/prettify/prettify.js"></script>
<link  type="text/css" rel="stylesheet"  href="/static/js/prettify/prettify.css" />

三、body标签中添加 onload函数

<body  onload="prettyPrint()">

四、编写markdown文档的时候,如果有代码

使用如下方式进行包含;

```prettyprint  

需要高亮的代码  

``` 

或者在编写html标签时,加 class="prettyprint"

因为,在页面加载的时候,prettyPrint() 处理的是 class = "*-prettyprint" 标签中的内容

五、如果不喜欢高亮的颜色

修改prettify.css中样式内容即可

六、完整代码参考


<!DOCTYPE html>
<html>
    <head>
    
        <!-- 1. Google 高亮代码插件: prettify -->
        <script src="/static/prettify/prettify.js"  type="text/javascript" ></script>
        <link  href="/static/prettify/prettify.css" type="text/css" rel="stylesheet" />
    </head>
    
    <!-- 2. 高亮代码加载函数 -->
    <body onload="prettyPrint()">

        <!-- 3.对需要高亮的代码加上 prettyprint 样式 -->
        <div class="prettyprint">
            适配各种编程语言
        </div>
        
    </body>
    
</html>