Configuring WordPress for Technical Blog

After a lot of thinking and weighing pros and cons, I have decided to use WordPress for my personal blog and website solution. I have explore other solutions like notion, Hugo+PaperMod, Obsdian+Jenkyll. Andrej Karpathy posted about what an ideal blogging solution might look like. While I agree to these requirements, I would also like a cloud hosting since I use multiple devices.

Why I Chose Not to Use Static Site Generators?

because:

• maintaining images and other artifacts is pain in markdown
• need a cloud solution: i use multiple devices, idea can strike anywhere
• need WYSIWYG editor
• easy to publish, don’t want to push to a repo to publish, although it makes easy to monitor changes

The best solution, IMHO, would be Notion editor with blog. The Notion editor is superb, allowing you to incorporate everything you might desire, with a very fluid user interface. From code editor, math, mermaid, svg, embed, it works seamlessly with all.

Why WordPress Worked for Me:

• cloud hosting: I can use it anywhere, mobile, desktop or on a friend’s computer
• more than blog: can use it for more than blog in future
• extensible: images and other supports are easy to add
• everything html: while it is not convenient as markdown, it uses only basic html tags which can be converted to markdown
• file / backup: weekly backups are available. I can create file backups in markdown with everything
• inbuilt comment support (although i am not using it)

but WordPress lacks some basic features which are important for technical blog

1. Code Blocks
2. Math Support

Setting up Code Blocks

The native code block of gutenberg editor is just blah. It’s very vanilla, doesn’t work well with large lines, doesn’t highlights syntax and doesn’t allow for defining language. There are a lot of plugins available in WordPress for code highlight but they are all heavy, introduces a new block which modifies the HTML code and introduces complex syntax. Finally, I found Code Syntax Block. This plugin instead of introducing new block type, modifies the native code block to support define language tag and code highlight using PrismJS. Look at the example below:

// program to generate fibonacci series up to n terms
// take input from the user
const number = parseInt(prompt('Enter the number of terms: '));
let n1 = 0, n2 = 1, nextTerm;
console.log('Fibonacci Series:');
for (let i = 1; i <= number; i++) {
    console.log(n1);
    nextTerm = n1 + n2;
    n1 = n2;
    n2 = nextTerm;
}

Setting up Math Support

I initially tried to use plugin for this as well. The plugins introduced new shortcodes which doesn’t generalizes well with markdown syntax. I just wanted to use $ and $$ to introduce math. To make this happen, I added Katex into the header of the site (this currently adds the library to all the pages, will figure out in future on how to add on limited pages based on some condition like tag or category). To add the library in header:

• Install WPCode Lite. This plugin allows you to insert code into header and footer of the site
• Add Katex library’s auto render extension. You can add other libraries like mermaid in the header as well.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css" integrity="sha384-n8MVd4RsNIU0tAv4ct0nTaAbDJwPJzDEaqSD1odI+WdtXRGWt2kTvGFasHpSy3SV" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.js" integrity="sha384-XjKyOOlGwcjNTAIQHIpgOno0Hl1YQqzUOEleOLALmuqehneUG+vnGctmUb0ZY0l8" crossorigin="anonymous"></script>
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/contrib/auto-render.min.js" integrity="sha384-+VBxd3r6XgURycqtZ117nYw44OOcIax56Z4dCRWbxyPt0Koah1uHoK0o4+/RRE05" crossorigin="anonymous"></script>
<script>
    document.addEventListener("DOMContentLoaded", function() {
        renderMathInElement(document.body, {
          // customised options
          // • auto-render specific keys, e.g.:
          delimiters: [
              {left: '$$', right: '$$', display: true},
              {left: '$', right: '$', display: false},
              {left: '\\(', right: '\\)', display: false},
              {left: '\\[', right: '\\]', display: true}
          ],
          // • rendering keys, e.g.:
          throwOnError : false
        });
    });
</script>

Hope this helps and happy blogging.

Update: I figured out to enable Katex library on certain tags. It’s an inbuilt feature of the WPCode Lite plugin.