How to configure syntax highlighting for GitHub Pages to be identical to GitHub syntax highlighting?

CodePudding user response：

GitHub uses a closed syntax highlighting library not available on GitHub Pages. Supposedly, it should be possible to get a reasonable result using the default Jekyll highlighter. However, for me it was simpler to switch to the highlight.js JS library. Here are the steps.

1. Disable Jekyll's highlighter in the _config.yml

2. Obtain the highlight.min.js library

   • Prebuilt library is available from the website or via CDNs.
   • A custom version can be generated online, if necessary.

3. Obtain a CSS theme file
   Specific CSS theme can be picked chosen using online demo service. CSS files are also available via CDNs or can be downloaded for local access.

4. Load the library, theme file, and initialize the library
   In my case, I placed the library in /assets/js/highlight.min.js and included the following lines in /_includes/head_custom.html

  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/styles/github.min.css">
  <script type="text/javascript" src="{{ '/assets/js/highlight.min.js' | relative_url }}"></script>
  <script>hljs.highlightAll();</script>

I also included a CSS element /_sass/custom/custom.scss in to overwrite code block background:

.hljs {background: #fdfdfa !important;}