本文作者:DurkBlue

浅谈网页代码高亮显示插件 google prettify的一些教程推荐

DurkBlue 2019-12-30 1952
浅谈网页代码高亮显示插件 google prettify的一些教程摘要: 网页代码高亮显示插件 google prettify 的使用方法        1.下载插件google pr...

网页代码高亮显示插件 google prettify 的使用方法

        1.下载插件google prettify

            地址:https://github.com/google/code-prettify  zip下载

        2.引入google prettify js和css文件

            这个是谷歌的代码美化插件,在使用的时候需要引入两个文件,分别是prettify.js  核心js、prettify.css 主题样式,

        3.调用google prettify运行

            然后在body调用onload="PR.prettyPrint()"函数。该函数可以让js给代码中的一些标记上色。还需要在pre标签中加入prettyprintlinenums两个类样式。

     示例代码:  

html<!DOCTYPE html><html><head><meta charset="utf-8"><title>Run_Prettify Test</title><script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.8.3/jquery.min.js"></script><script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script><link rel="stylesheet" href="https://github.com/google/code-prettify/blob/master/loader/prettify.css"/></head><body onload="PR.prettyPrint()"><pre class="prettyprint linenums">testtest</pre></body></html>

        官网教程:https://github.com/google/code-prettify/blob/master/docs/getting_started.md

        官网demo:https://github.com/google/code-prettify/blob/master/examples/quine.html


此篇文章由DurkBlue发布,撰文不易,转载请注明来处
文章投稿或转载声明

来源:DurkBlue版权归原作者所有,转载请保留出处。本站文章发布于 2019-12-30
温馨提示:文章内容系作者个人观点,不代表DurkBlue博客对其观点赞同或支持。

赞(0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

阅读
分享