Updated Code Block Styling

Really didn't like the look of code on the previous post. This has been on the todo list and I just went ahead and made it happen today. Now code is styled using rouge and monokai styling.

Here is an example of html formatting with line numbers.

<marquee>Hello World!</marquee>

Here is a result of the impressive code.

Hello World!

This was implemented by updating the _config.yml for the site like so.

markdown: kramdown
kramdown:
  input: GFM
  syntax_highlighter: rouge

With the inclusion of styling css in the header.

<link rel="stylesheet" href="{{ "/assets/css/syntax_monokai.css" | relative_url }}" media="print" onload="this.onload=null;this.removeAttribute('media');" fetchpriority="low">

Not a lot to get it readable which is nice. I'm done with same day changes now I think.

This is day 12 of 100 Days To Offload.

Tags
Meta 100 Days To Offload Web Development
Christopher Himes

I'm Christopher Himes (he⁠/⁠him), an accomplished tech professional living in Metro Detroit. I'm currently looking for work as a product owner or developer.

More about me

Comments

This blog uses a Mastodon and webmentions for comments. You can comment by replying on Mastodon/ActivityPub/Fediverse account or webmention.

  • Simple Silly

    Nov 21, 2024

    Recent changes on the site have been focusing on un-bootstrapping the site. This is an excuse in part to experiment with flex box and modern CSS in general.

    Meta

Recent Posts