Improving My Blog Interface With Some Cool Markdown Plugins

Updated on:

|

View source
On this page

Adding Math Support

Mathematical expressions are crucial for technical writing. Fortunately, adding LaTeX-style math to an Astro blog is surprisingly simple using remark-math and rehype-katex.

Terminal window
npm install rehype-katex remark-math

Update the astro.config.mjs to include the math plugins:

import { defineConfig } from 'astro/config';
import remarkMath from 'remark-math';
import rehypeKatex from 'rehype-katex';


export default defineConfig({
  markdown: {
    // ...
    remarkPlugins: [remarkMath],
    rehypePlugins: [rehypeKatex],
  },
});

Add this line to the .css file

.katex-html {
  @apply hidden;
}

Once you’ve set it up, can you write mathematical expressions directly in your markdown:

example.md
// Example math expression
$$
\sum_{i=1}^{n} x_i = x_1 + x_2 + \cdots + x_n
$$

will be rendered as

∑i=1nxi=x1+x2+⋯+xn\sum_{i=1}^{n} x_i = x_1 + x_2 + \cdots + x_n

The setup integrates seamlessly with Tailwind Typography, making mathematical content both readable and aesthetically pleasing.

Better Code Highlighter

Astro’s built-in Shiki highlighter is solid, but for complex code examples like terminal sessions, Expressive Code provides better control and styling options

Terminal window
npx astro add astro-expressive-code

This opens up some new options for us. For example, we can add labels to sections of code blocks bash {"output":2-8}:

Terminal window
npm run dev


> astro-blog@0.0.1 dev
> astro dev


16:46:30 [types] Generated 1ms
16:46:30 [content] Syncing content
16:46:30 [content] Synced content

Line markers are also easy to add, for example using this config js title="line-markers.js" del={2} ins={3-4} {6}

line-markers.js
function demo() {
  console.log('this line is marked as deleted')
  // This line and the next one are marked as inserted
  console.log('this is the second inserted line')


  return 'this line uses the neutral default marker type'
}
blog markdown