Skip to main content

從 GitHub 公開 Repository 中引用範例程式碼的方法

前言​

原本在 Docusaurus 2.x 版就有一個第三方套件 docusaurus-theme-github-codeblock 可以讓我們輕鬆的在 Docusaurus 裡面引用 GitHub 公開 Repository 中的範例程式碼。

不過它畢竟是專為 2.x 版撰寫的，將 Docusaurus 升版到 3.x 之後，它就壞掉了。

註記

雖然 docusaurus-theme-github-codeblock 只適用於 Docusaurus 2.x 版，但是在 Docusaurus 的官網上還是沒特別標示它不適用於 3.x 版。

從 2023 年 11 月，就有人開始向 docusaurus-theme-github-codeblock 的作者敲碗，請它讓 docusaurus-theme-github-codeblock 也能支援 Docusaurus 3.x 版。

不過不知道是不是作者太忙的關係，後來是由另一位大大跳出來 fork 了 docusaurus-theme-github-codeblock，並且改了一版同時支援 Docusaurus 2.x 和 3.x 版的版本。

接下來，就來簡單介紹一下怎麼使用這個套件吧。

安裝​

可以透過 yarn 或是 npm 安裝這個套件：

yarn add docusaurus-theme-github-codeblock

設定​

安裝完之後，還不會馬上生效。

得要在 docusaurus.config.js 裡再動一些手腳：

docusaurus.config.js
    // ...
    themes: [
        'docusaurus-theme-github-codeblock'
    ],
    // ...

有用過 @saucelabs/theme-github-codeblock 的同學應該一點都不陌生才對，畢竟是 fork 過來改的。

使用​

之後要在 Docusaurus 的文件庫或是部落格文章裡引用 GitHub 上的範例程式碼，只需要簡單的像下面這樣：

  ```js reference title="src/pages/index.jsx"
  https://github.com/Ouch1978/ouch1978.github.io/blob/main/src/pages/index.jsx
  ```

這樣就可以輕鬆的把範例程式嵌到頁面裡囉!!

成品的範例如下：

src/pages/index.jsx
loading...

後記​

這個套件其實還有一些提供客製化的參數，有興趣的同學不妨直接參考該套件的 官網，同時也給作者按個星星鼓勵他一下。

以上。