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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM