making code block in css look good

Question

I am trying to find the right css required to make my code block look good in my Jekyll powered Github Pages blog. I want it the code to look something like this (I'm using kramdown with syntax highlighting):

I tried highlight.js but I think my scss block is overwriting the formatting:

pre { background-color: #D1D1D0; overflow: auto; font-family: 'Monaco', monospace; padding: 0 1em; }



code {
    font-family: Monaco, monospace;
    font-size: $base-font-size;
    line-height: 100%;
    background-color: #eee;
    padding: 0.2em;
    letter-spacing: -0.05em;
    word-break: normal;
    /border-radius: 5px;/
  }

pre code { border: none; background: none; font-size: $base-font-size * 0.875; line-height: 1em; letter-spacing: normal; word-break: break-all; }

Fab · Accepted Answer · 2019-02-23 06:13:30Z

23

The easiest way to do that, I think, is to simply include highlight.js in your page.

Check out the Highlight.js demo to see what style you want to use.
I guess that the Monokai theme would be the best match to that screenshot of yours.

Highlight.js does not require you to alter any markup because it (usually) works in automatic mode.

<link rel="stylesheet" href="/path/to/styles/default.css"/>
<script src="/path/to/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

After the insertion of the above code in the appropriate places, all your code blocks will be highlighted.

Provided that they are rendered like this:

<pre><code>
    // code here
</code></pre>

But that is the standard way of doing it, so I guess that the Jekyll thingie spits that out.

Having recommended that, I wonder if Jekyll doesn't ship with a highlighter of it's own? It probably does. Or not. ;)

edited Feb 23, 2019 at 6:13

Fab

14.9k5 gold badges54 silver badges73 bronze badges

answered Feb 28, 2016 at 5:39

jacmoe

1,72713 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Griff Over a year ago

Because it is hosted on Github, there already is syntax highlighting through kramdown. I am just trying to find the right color scheme basically using my pre {} blocks. I've edited my question with what I have currently.

jacmoe Over a year ago

Kramdown is a Markdown variant, not a syntax highlighter?

Griff Over a year ago

Sorry I have rouge set for the syntax highlighting. Don't I need to set a style for the highlighting though? Isn't this done in the scss like in my example?

jacmoe Over a year ago

Highlight.js adds all of that. You only have to adjust the code and pre tags if you want something 'special'. If you view the source for some highlighted code you will see that the library adds a lot of markup. You can modify how it looks by applying a style sheet (a theme) - there are tons on the highlight.js site.

Griff Over a year ago

I worked it out - my own style sheet was overriding some of the key aspects which highlight.js takes care of naturally. I have not setup highlight.js properly and can choose any theme I want. Thanks!

Collectives™ on Stack Overflow

making code block in css look good

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related