zoukankan      html  css  js  c++  java
  • PrismJS,一款漂亮的代码高亮工具

    PrismJS 是一款轻量级、可扩展的语法高亮显示工具,在支持现代 Web 标准基础下增加了更多可选的风格插件。

    PrismJS 支持自定义扩展代码的语言、主题和插件选项,勾选自己常用的代码语言和主题风格以及增强插件,将定制好的代码文件 prism.css 和 prism.js  如下方式链接到页面

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs@1.17.1/themes/prism.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs@1.17.1/themes/prism-twilight.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs@1.17.1/themes/prism-dark.min.css">
        
    <script src="https://cdn.jsdelivr.net/npm/prismjs@1.17.1/prism.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/prismjs@1.17.1/components/prism-clike.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/prismjs@1.17.1/components/prism-c.min.js"></script>

    再使用 <pre><code> 编辑方式编写代码文章即可展现漂亮的代码高亮。

    <pre><code class="language-css">p { color: red }</code></pre>

    PrismJS 支持常见的 Markup+HTML(html+css+js),以及 java、python、docker、bash、nginx、powershell 等 183 种程序语言,并且增强插件上支持命令行模式(Command Line)、行高亮模式(Line highlight)和行序号模式(Line Numbers)等功能。

    完整功能预览页面:Examples ▲ Prism (prismjs.com)

    <!DOCTYPE html>
    <html>
    <head>
        ...
        <link href="themes/prism.css" rel="stylesheet" />
    </head>
    <body>
        ...
        <script src="prism.js"></script>
    </body>
    </html>

    官方网站:https://prismjs.com

    本文来自博客园,作者:木子欢儿,转载请注明原文链接:https://www.cnblogs.com/HGNET/p/15490125.html

  • 相关阅读:
    Java线程面试题 Top 50
    深入理解java内存模型
    线程池的理解
    Thread的理解
    ThreadLocal的理解
    排序算法(简)
    排序算法
    【Java集合源码剖析】LinkedHashmap源码剖析
    vsftp上传文件权限问题
    xp 通过注册表修改环境变量
  • 原文地址:https://www.cnblogs.com/HGNET/p/15490125.html
Copyright © 2011-2022 走看看