您当前的位置:首页 > 学无止境 > 建站心得 建站心得

漂亮的博客文章代码块高亮Prisim

caster2019-05-14 11:47:13 建站心得 人已围观

简介一,Prism.jsPrism是一个轻量,可扩展的代码语法高亮库,使用现代的web标准构建。它已在数千个网站中使用,包括本网站(http://www.eotodo.com)。二,为什么选择Prism.js1. 轻巧的体积

一,Prism.js


Prism是一个轻量,可扩展的代码语法高亮库,使用现代的web标准构建。它已在数千个网站中使用,包括本网站(http://www.eotodo.com)。

二,为什么选择Prism.js


1. 轻巧的体积

可选择的下载配置,选择需要的模块进行打包下载,生成的js和css包体积,一般都只有几k。

2.多彩的主题

promise提供多种风格的支持

主题 体积
默认 2.22kb
黑暗 2.02kb
时髦的 2kb
Okaidia 4.04kb
暮光之城 4.04kb
Coy 4.04kb
Solarized Light 2.54kb
明天之夜 1.72kb
3.多开发语言支持

几乎支持了所有主流的开发语言,不用担心自己博客中的代码块不被支持。

4.多插件支持
支持插件 体积
突出显示 3.74kb
行号 2.63kb
显示 2.63kb
突出显示 3.74KB
行号 2.63KB
显示Invisibles 1.01KB
Autolinker 1.13KB
Web平台文档 3.37KB
自定义类 0.45KB
文件突出显示 1.53KB
显示语言 2.75KB
JSONP亮点 2.3KB
突出显示关键字 0.17KB
删除初始换行符 0.31KB
预览者 16.86KB
Autoloader 3.83KB
保持Markup 1.22KB
命令行 2.82KB
非转义标记 1.5KB
规范化Whitespace 2.41KB
Data-URI突出显示 1.43KB
工具栏 2.96KB
复制到剪贴板按钮 0.9KB

3,如何使用


使用Prism,只需要引入对应的css和js就可以了。

开始使用
  1. 在页面头文件中引入css文件
  2. 在页面尾部引入js文件
  3. 需要高亮的代码使用pre和code标签包裹
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="keywords" content="景凌凯,景凌凯个人博客,代码块高亮,prism"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>prism-demo</title>

    <link rel="stylesheet" href="./prism.css" />
  </head>
  <body>
    <pre>
        <code class="language-css">
            <footer>
                <div class="box">
                    <p>
                    © 2018-2019 eotodo. All Rights Reserved. 版权所有.<a
                        href="http://www.beian.miit.gov.cn"
                        >ICP18022238</a
                    >
                    <a href="">百度统计</a>
                    </p>
                </div>
                <a href="#">
                    <div class="top"></div>
                </a>
                <script src="http://static.eotodo.com/js/click.js"></script>
                
            </footer>
          </code>
        </pre>
  </body>
  <script src="./prism.js"></script>
</html>
       
 

文章评论

本栏推荐

猜你喜欢

打赏

  • 如果你觉得本站很棒,可以通过扫码支付打赏哦!
  • 微信扫码:你说多少就多少~
  • 支付宝扫码:你说多少就多少~