Iman Codes

If you consider website-making to be coding (and really, you should!), I've been coding since like... grade 3? which was in the 90's. I was a teeny child, making an AngelFire website, complete with Pokémon gifs. Specifically, this one:

Of course, there were other gifs as well. It was a) the era, and b) come on, I was like 9.

Anyway, I've been going back to my roots and playing with the CSS here, aka “stealing” code from elsewhere to make my site look half-decent haha.

I'm using the Narrow Road, Deep North theme from the Write.as theme gallery but am slowly making it my own. I've also taken some of the CSS from Tea Time – mainly the link hover highlighting.

But the code I'm happiest about “borrowing” is the code blocks! Write.as is in Markdown and supports both inline code and code blocks, and has syntax highlighting through highlight.js. I was struggling to customize the code blocks though, and came across this blog post on how to change the highlight.js theme in Write.as, conveniently enough.

Anyway, I did the thing (since the colours of Narrow Road, Deep North are based on the Nord colour theme, I of course used that one from the highlight.js themes). It somehow it wasn't still working – I couldn't get the language detection, and it wouldn't even do the plain text bit, so I decided to go, well, simpler. Changing the highlight.js theme didn't even change my inline code, so I had to get that anyway.

I ended up on this article, where I kinda just... took things and only vaguely understood how it works. But hey, it works and I don't think anything looks too wonky! And if I do find something weird, I'll be more able to fix it. Plus, now I have the fancy CSS for my inline code and my plain code blocks:

ooooh fancy, i'm a code block
look at me be all code-y

And then I played around a bit more and did, in fact, get the syntax highlighting to work. Apparently the Markdown code blocks won't auto-detect language, so I have to be specific in the HTML. So here's the CSS for my inline and plain code blocks to show off the syntax highlighting bit:

/* 
    oooh comments, look at me go
    also this is CSS for my inline and block code, formatted to work in write.as

*/

pre {
  color: #eceff4;
  background: #2e3440 !important;
  border-radius: .5rem !important;
}

p > code,
li > code,
dd > code,
td > code {
  color: #eceff4;
  background: #2e3440 !important;
  font-size: 0.9rem !important;
  padding: .2rem .3rem .2rem !important;
  border-radius: .2rem !important;
}

So there you have it. Mostly I wanted this up so if I do need to change my code blocks around, I can refer to this page and refresh as needed, haha.

#css