Decorating Your Blog

zhuzilin APR 5, 2021

This is a post on some isolated styling features I added to this blog site and it may grow while I update the site. You could certainly skip this one and starting work on your own blog~

Add Code Highlighting

Without highlighting, code are just paragraphs of chaos...

As we are using the remark (unified.js) ecosystem, it' s pretty easy to add code highlighting to our markdown posts. We could simply add the highlight.js plugin — rehype-highlight to the remark processor:

import highlight from 'rehype-highlight';

let runner = unified()

And the generated html would have the class names of highlight.js.

Then, attach the desired style theme to the header in __layout.svelte. In this project, I chosed the github theme:

  <link rel="stylesheet"

And now comes the highlighted code!

#include <stdio.h>
int main() {
   printf("Hello, World!");
   return 0;

Add a Github Corner

It's very common to have a link to the Github repo and it is super easy using Svelte. I chose tholman/github-corners as the corner component and its web component can be directly used as a .svelte file. Then simply add a GithubCorner component to the layout will do the trick:

  import '../app.scss';
  import Nav from '$lib/Nav.svelte';
  import GithubCorner from '$lib/GithubCorner.svelte';


<div class="g-app-wrapper">