Github Pages - markdown for better rendering of code snippets

Question

I am trying to add a code snippet on blog post I am making using Github Pages & this what it looks like.

A double-framed horror occupying a huge amount of space for just a few lines of code.

I have tried different kinds of markdown

<pre><code> block
4 spaces
triple backtick

I am unable to get it to render any better.

I am using the default styles etc forked from jekylnow.

Are there any tricks I am missing?

UPDATE:

Markdown

Hello

function try(no) 
{
    while (no)
    {
        ...
        ....
    }
    return no;  
}

Hello


function try(no) 
{
    while (no)
    {
        ...
        ....
    }
    return no;  
}

Hello


function try(no) 
{
    while (no)
    {
        ...
        ....
    }
    return no;  
}

@cherrywoods - I have updated with markdown - but you would have to click edit to see the source. — user93353, Aug 13 '21 at 20:16
Oh yeah, all right, I forgot about that... Maybe you could otherwise add the link to the github repository so we can see source and result? — cherrywoods, Aug 14 '21 at 07:32
This is more of a CSS problem, than a markdown problem, any of the methods you stated should work. But more importantly, you should post the resulting HTML too — abdusco, Aug 19 '21 at 01:21
It looks like [this bugfix](https://stackoverflow.com/a/59059539/4309850) should work. — Michal, Aug 23 '21 at 20:01

score 1 · Accepted Answer · answered Aug 24 '21 at 00:28

As described by @lukehod in this answer...

In the _sass/_highlights.scss file you simply need to replace .highlight with pre.highlight. It appears that some styling can be applied twice if this is not specified. I also had a entry in pre.highlight{...} that I changed from overflow: scroll; to overflow: auto; in order to hide the scroll bars if they are not necessary.

BEFORE:

.highlight{
    ...
    overflow: scroll;
    ...
}

AFTER:

pre.highlight{
    ...
    overflow: auto;
    ...
}

It appears the original issue was with some Jekyll templates that people are running into still. I found the answer from this SO answer which referenced this thread if anyone wants more info.

Github Pages - markdown for better rendering of code snippets

1 Answers1