Highlight.js - Javascript的Web語法高亮

    它幾乎可以與任何標記一起使用,不依賴于任何框架,并且具有自動語言檢測功能。

    Highlight.js是用JavaScript編寫的語法突出顯示工具。它在瀏覽器和服務器上均可使用。它幾乎可以與任何標記一起使用,不依賴于任何框架,并且具有自動語言檢測功能。

    本站下載:

    頁底文件來源于Github,于2019年11月19號下載。

    Highlight.js - Javascript的Web語法高亮
    • 185種語言和90種樣式
    • 自動語言檢測
    • 多語言代碼突出顯示
    • 可用于node.js
    • 適用于任何標記
    • 與任何js框架兼容

    如何使用?

    來源于: https://highlightjs.org/usage/

    入門

    在網頁上使用Highlight.js的最低要求是將鏈接到庫以及其中一種樣式并調用?initHighlightingOnLoad

    <link rel="stylesheet" href="/path/to/styles/default.css">
    <script src="/path/to/highlight.pack.js"></script>
    <script>hljs.initHighlightingOnLoad();</script>

    這將在<pre><code>標簽內找到并突出顯示代碼;它會嘗試自動檢測語言。如果自動檢測對您不起作用,則可以在class屬性中指定語言:

    <pre><code class="html">...</code></pre>

    支持的語言和相應類的列表。

    類也可以使用language-或作為前綴lang-

    要使任意文本看起來像代碼,但不突出顯示,請使用?plaintext此類:

    <pre><code class="plaintext">...</code></pre>

    要完全禁用突出顯示,請使用nohighlight類:

    <pre><code class="nohighlight">...</code></pre>

    自定義初始化

    當需要對Highlight.js的初始化進行更多控制時,可以使用highlightBlockconfigure?函數。這可以讓你控制什么突出和

    這是initHighlightingOnLoad使用普通JS?調用的等效方法:

    document.addEventListener('DOMContentLoaded', (event) => {
      document.querySelectorAll('pre code').forEach((block) => {
        hljs.highlightBlock(block);
      });
    });

    您可以使用任何標簽代替<pre><code>標記代碼。如果您不使用保留換行符的容器,則需要配置highlight.js以使用<br>標記:

    hljs.configure({useBR: true});
    
    document.querySelectorAll('div.code').forEach((block) => {
      hljs.highlightBlock(block);
    });

    有關其他選項,請參閱的文檔configure

    網絡工作者

    您可以在網絡工作者中運行突出顯示功能,以避免在處理非常大的代碼塊時凍結瀏覽器窗口。

    在您的主腳本中:

    addEventListener('load', () => {
      const code = document.querySelector('#code');
      const worker = new Worker('worker.js');
      worker.onmessage = (event) => { code.innerHTML = event.data; }
      worker.postMessage(code.textContent);
    });

    在worker.js中:

    onmessage = (event) => {
      importScripts('<path>/highlight.pack.js');
      const result = self.hljs.highlightAuto(event.data);
      postMessage(result.value);
    };

    Node.js

    您可以在節點上使用highlight.js突出顯示內容,然后再將其發送到瀏覽器。確保使用該.value屬性獲取格式化的html。有關返回的對象的更多信息,請參考api docs https://highlightjs.readthedocs.io/en/latest/api.html

    // require the highlight.js library including all languages
    const hljs = require('./highlight.js');
    const highlightedCode = hljs.highlightAuto('<span>Hello World!</span>').value
    // require the highlight.js library without languages
    const hljs = require("highlight.js/lib/highlight.js");
    // separately require languages
    hljs.registerLanguage('html', require('highlight.js/lib/languages/html'));
    hljs.registerLanguage('sql', require('highlight.js/lib/languages/sql'));
    // highlight with providing the language
    const highlightedCode = hljs.highlight('html', '<span>Hello World!</span>').value

    獲取圖書館

    您可以將Highlight.js作為托管或自定義構建的瀏覽器腳本或作為服務器模塊來獲取。即開即用的瀏覽器腳本同時支持AMD和CommonJS,因此,如果您希望可以使用RequireJS或Browserify,而無需從源代碼進行構建。服務器模塊也可以與Browserify完美配合,但是可以選擇使用特定于瀏覽器的版本,而不是用于服務器的版本。前往下載頁面以獲取所有選項。

    不要直接鏈接到GitHub。該庫不應直接從源頭工作,它需要構建。如果沒有任何預包裝的選項對您有效,請參考建筑文檔

    CDN托管的軟件包沒有所有的語言。否則它將太大。如果您在“通用”部分中沒有看到所需的語言,則可以手動添加:

    <script
     charset="UTF-8"
     src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.9/languages/go.min.js"></script>

    在杏仁上。您需要使用優化器為模塊命名。例如:

    r.js -o name=hljs paths.hljs=/path/to/highlight out=highlight.js

    普通JS

    您可以將Highlight.js導入為CommonJS模塊:

    npm install highlight.js --save

    在您的應用程序中:

    import hljs from 'highlight.js';

    默認導入會導入所有語言!因此,僅導入所需的庫和語言可能會更有效:

    import hljs from 'highlight.js/lib/highlight';
    import javascript from 'highlight.js/lib/languages/javascript';
    hljs.registerLanguage('javascript', javascript);

    要設置語法突出顯示樣式,如果構建工具從JavaScript入口點處理CSS,則可以將樣式表直接導入到CommonJS模塊中:

    import hljs from 'highlight.js/lib/highlight';
    import 'highlight.js/styles/github.css';

    執照

    Highlight.js是在BSD許可下發布的。有關詳細信息,請參見LICENSE文件。

    下載權限

    查看
    • 免費下載
      評論并刷新后下載
      登錄后下載

    查看演示

    • {{attr.name}}:
    您當前的等級為
    登錄后免費下載登錄 小黑屋反思中,不準下載! 評論后刷新頁面下載評論 支付以后下載 請先登錄 您今天的下載次數(次)用完了,請明天再來 支付積分以后下載立即支付 支付以后下載立即支付 您當前的用戶組不允許下載升級會員
    您已獲得下載權限 您可以每天下載資源次,今日剩余
    資源

    Quill - 功能強大的RTF編輯器

    2019-11-15 23:59:00

    資源

    Prism- 輕巧,健壯,優雅的語法高亮顯示

    2019-11-21 16:26:00

    ??
    Npcink上的部份代碼及教程來源于互聯網,僅供網友學習交流,若您喜歡本文可附上原文鏈接隨意轉載。
    無意侵害您的權益,請發送郵件至 1355471563#qq.com 或點擊右側 私信:Muze 反饋,我們將盡快處理。
    0 條回復 A文章作者 M管理員
      暫無討論,說說你的看法吧
    ?
    個人中心
    購物車
    優惠劵
    今日簽到
    有新私信 私信列表
    搜索
    主站蜘蛛池模板: 无码人妻精品一区二区三区66 | 精品国产一区二区三区| 日本人的色道www免费一区| 日韩人妻精品一区二区三区视频| 亚洲中文字幕久久久一区| 久久久久久人妻一区精品| 日本无卡码免费一区二区三区| 久久91精品国产一区二区| 色妞AV永久一区二区国产AV| 制服中文字幕一区二区| 久99精品视频在线观看婷亚洲片国产一区一级在线 | 亚洲一区二区三区自拍公司| 亚洲福利视频一区二区| 国产精品va无码一区二区| 亚洲日本va午夜中文字幕一区| 亚洲狠狠狠一区二区三区| 无码日本电影一区二区网站| 色欲AV无码一区二区三区| 国产在线精品一区二区不卡麻豆| 日韩精品无码一区二区中文字幕| 无码国产精品一区二区免费式直播| 日韩一区二区免费视频| 国产视频一区二区在线播放| 欧美日韩精品一区二区在线观看| 精品91一区二区三区| 亚洲制服丝袜一区二区三区| 国产在线观看一区二区三区| 人妻无码第一区二区三区| 国产精品日韩一区二区三区| 3d动漫精品啪啪一区二区中文| 免费国产在线精品一区| 亚洲AV无码一区二区三区鸳鸯影院 | 亚洲欧美日韩一区二区三区在线 | 无码国产精品一区二区免费式芒果| 亚洲乱码av中文一区二区| 日本一区二区三区在线观看| 国产福利一区视频| 无码少妇一区二区三区浪潮AV| 国产精品无码一区二区三区毛片| 精品亚洲A∨无码一区二区三区| 精品国产不卡一区二区三区|