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:

Answer 1

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.

Answer 2

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.)

Answer 3

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