Getting code highlighting working on Blogger

-

One time setup

Click on Theme in your blog settings, click the down arrow on the Customize button and choose Edit HTML.

Find the </head> tag and paste in the following code just above it, so you end up with:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
</head>

Now find the </body> tag and paste in the following code just above it, so you end up with:

<script>
      //<![CDATA[
      let checkHljsInterval;
      
      checkHljsInterval = setInterval(() => {
          const numCodeSnippets = document.querySelectorAll("pre > code")?.length;
          const numHighlighted = document.querySelectorAll("pre > code.hljs")?.length;
          if (numCodeSnippets > 0) {
              if (numCodeSnippets !== numHighlighted) {
                  hljs.highlightAll();
              } else {
                  clearInterval(checkHljsInterval);
              }
          }
      }, 100);
      //]]>
      </script>
</body>

Without this method, highlight.js does try to be clever and add a onDOMContentLoaded event but it seems that Blogger hasn't completely finished rendering by the time that event fires. Originally I used a timeout but it wasn't reliable and it sometimes felt jarring to see the code highlighting added seconds later. I moved to an interval, which isn't perfect (it will keep running if you have no code to highlight) but it does the job.

Adding code highlighting to a post

To add code formatting to a post, switch to HTML view by clicking the leftmost icon in the edit toolbar and wrap any code segments in <pre><code> tags e.g.

<pre><code>const time = new Date();</code></pre>

If you know the language in advance, you can set it explicitly:

<pre><code class="language-js">const time = new Date();</code></pre>

More details at https://highlightjs.org/

It's a shame you have to go into the HTML editor to add the pre and code tags manually. If anyone knows an easier way to add those tags, let me know in the comments.

Changing the default theme

Browse alternative themes here: https://cdnjs.com/libraries/highlight.js/11.9.0

Copy the URL and replace the href in the One Time Setup step above with the newly chosen theme URL.

Comments

Post a Comment

Popular posts from this blog

Using PyTorch on Heroku

-
I wanted to share a problem I ran into whilst trying to run a Python app with the torch library on Heroku. If you see a message like this in your Heroku deployment logs: Compiled slug size: 504MB is too large (max is 500MB). Its probably because the torch library is being included in its entirety including all the CUDA libraries. At time of writing, none of the Heroku Dyno instances support CUDA, so there is no need to include all those libraries. You need to specify the cpu only version to fix it. In your requirements.txt, add the following at the top: -f https://download.pytorch.org/whl/cpu/torch_stable.html And then update your torch dependency to add the "+cpu" suffix: torch==2.3.1+cpu Note, the latest version of torch may not have a CPU-only build, so you may need to check the CPU build releases here to find the latest version: https://download.pytorch.org/whl/cpu/torch_stable.html
Read more

Problem deploying app to heroku using GitHub Actions

-
If you get the following error when trying to use GitHub actions to deploy a Docker-based app to Heroku:  > Error: This command is for Docker apps only. Switch stacks by running > heroku stack:set container. Or, to deploy *** with heroku-24, Its telling you how to solve it in the error. I don't know why this happened only when I created a new app, it didn't seem to occur for the first app I created. Fixing using the heroku-cli seems like the only solution, I tried for a way to do it using the heroku GUI but it didn't seem possible. First, install heroku-cli: brew install heroku Firstly, you have to login: heroku login This should launch a webpage where you can login. After that, try to run a command which will list the current stack of your app: heroku stack If you get an error message such as: > Error: The following error occurred: > Missing required flag app > See more help with --help It means your app isn't hoo...
Read more