Jekyll markdown not displaying like the original and general style problems

Help
1

Hey,

we have a blog post written in markdown, which we would like to implement on our Jekyll page which is hosted on GithubPages.

Here an excerpt of the post:

code
code.png2402×1652 476 KB

Here is how it should look like (displayed on Github in a README.md):

pictures on stackoverflow as I am not allowed to post more pictures here: https://stackoverflow.com/questions/45782448/jekyll-markdown-not-displaying-like-the-original-and-general-style-problems

Here is how our final post.md looks on the hosted Jekyll page:

pictures at stackoverflow

We looked for hours how get this done and our results and realizations so far are:

  • There doesn’t seem to be a reasonable way to implement posts written in markdown into Jekyll
  • The result is quite unpleasant (lists messed up, codeblocks not super nice, weird spacings and vertical distances)
  • I had to implement some syntax.css to have the code blocks styled
  • Jekyll forces us to use kramdown
  • There is no easy to convert markdown to kramdown (kramdown seems to have different syntax in some places)

Also I don’t really get, why e.g. lists are rendered without any style, although they are correctly registered as ul li elements in the DOM. The list-style: none;for the <ul> elements comes from some inline <style type="text/css"> rendered into the websites head. Don’t really know where it comes from, the main theme maybe?

[picture at stackoverflow]

Without this style tag at least the list look better…

I tried things like using kramdown=“1” attribute, playing around with the indents and dozens of other ‘tricks’ and structures.

  1. Is there any easy way to have real markdown rendered like on Github?
  2. How to know where this weird style tag comes from? How to exclude it?
2

I don’t think this is a jekyll or kramdown issues, I think it is your css.

Have you tried doing it in a new basic site to see if it does the same thing?

I don’t see any links to your real site or a repo to see the code, without that I don’t really think it can be troubleshooted very well.

My understanding of markdown is that there is no real markdown spec that everyone uses - it is sort of vague. Kramdown is one flavor, should be very similar to what GH uses. From what I can tell your post doesn’t look anything like it would if I had it on one of my sites, so to me that leaves your css as a possible issue.

1 Like
3

Hey, thank you very much for your answer.

The repo I am working on is private unfortunately.

the website I am talking about is www.machinlearning.berlin

I get your point. I wanted to set up a whole new project as well to check, how the markdown will behave. Stackoverflow, however, says that themes mess everything up :sweat_smile: