Why do I get a double frame around markdown code block on Jekyll site?

Question

I am using markdown to create posts for a Jekyll blog with the Jekyll-Now theme, hosted on GitHub Pages. I am highlighting code using fenced code blocks (with three back ticks) and when posted, the code block displays with a double frame. I would like just a single frame. I used stackedit.io to test the markdown, and it looks fine - just one frame. Also looks correct here (see below).

Blog post here. I'm obviously new at this with only one post.

Any ideas? Thank you.

Markdown

Original markdown also in GitHub here.

```python
center_lower_48 = [39.833333, -98.583333]
map = folium.Map(location = center_lower_48,
                 zoom_start = 4,
                 control_scale = True,
                 tiles = 'Stamen Terrain')
```

Markdown should display as:

center_lower_48 = [39.833333, -98.583333]
map = folium.Map(location = center_lower_48,
                 zoom_start = 4,
                 control_scale = True,
                 tiles = 'Stamen Terrain')

Instead looks like:

Double frame around code block

score 11 · Answer 1 · answered Nov 26 '19 at 21:24

For anyone experiencing this issue still (like me) and looking for the actual bugfix since the OP never actually said how they fixed it here you go:

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.

If you find the font is still too large, as I do, which means you get more scrollbars than you would like, add `font: small` in the same place as `overflow: auto`. — FreelanceConsultant, Sep 18 '22 at 13:38

score 0 · Answer 2 · edited Jun 20 '20 at 09:12

0

Kramdown supports regular (indented) and fenced code blocks, though its syntax differs from the triple-backick GitHub-style you're using:

kramdown also supports an alternative syntax for code blocks which does not use indented blocks but delimiting lines. The starting line needs to begin with three or more tilde characters (~) and the closing line needs to have at least the number of tildes the starting line has.

…

You can tell kramdown the language of a code block by using an IAL:
~~~
def what?
  42
end
~~~
{: .language-ruby}

In your case, something like

~~~
center_lower_48 = [39.833333, -98.583333]
map = folium.Map(location = center_lower_48,
                 zoom_start = 4,
                 control_scale = True,
                 tiles = 'Stamen Terrain')
~~~
{: .language-python}

should do it. Note that neither of these is standard Markdown.

(The frame you're currently seeing probably results from kramdown nesting several code blocks.)

edited Jun 20 '20 at 09:12

Community

1
1

answered Mar 22 '19 at 21:45

ChrisGPT was on strike

127,765
105
273
257

Thank you for the reply. I tried this and unfortunately it doesn't work. I thought it might be the indents, so I tried just 3 x tilde and then one line with no indents and then 3 x tilde but I still get the double frame. See "Test code block." here: https://goodmorningdata.github.io/NPS-Clickable-Map-Parks/ – aceace Mar 23 '19 at 05:05
Are you sure you're [using kramdown](https://jekyllrb.com/docs/configuration/markdown/)? – ChrisGPT was on strike Mar 23 '19 at 11:30
Yes, it is Kramdown, but there is a bug in a scss file in the Jekyll template which was causing the double frame. Fixed now. Thank you so much for replying. – aceace Mar 23 '19 at 14:15

score -2 · Answer 3 · answered Mar 23 '19 at 06:20

-2

I discovered that this is a bug with the Jekyll template. Thank you for your assistance.

answered Mar 23 '19 at 06:20

aceace

59
2

This is not an answer. – scottlittle Mar 28 '20 at 21:34

Why do I get a double frame around markdown code block on Jekyll site?

Markdown

Markdown should display as:

Instead looks like:

3 Answers3

Linked