0

I'm using Github pages as a personal blog, and I update md files in the _post directory.

Here is the md file. It looks totally cool in the Github repo but on the Github Pages the code block doesn't sink in and the pictures won't show up.

My understanding is that Github and Github pages use the same kramdown processor for markdown, so I don't get why the difference.

yinkouya
  • 83
  • 1
  • 11
  • 1
    They both look fine to me. What specifically is the problem? – Waylan Aug 02 '17 at 12:42
  • Also, while GitHub Pages does use Kramdown, GitHub does not. They use their own custom CommonMark parser (see [here](https://github.github.com/gfm/)) – Waylan Aug 02 '17 at 12:44
  • in the md file, the code block has a sinking effect with grey backgound, and if add css after ``` it will help highlighting. However in github pages, the code block will just be a block without a grey sinking effect, not to mention the highlighting. – yinkouya Aug 02 '17 at 14:55
  • So your question is about styling the HTML output. That is completely unrelated to Markdown. You need to use CSS to style the HTML. Some related questions are [How to apply Color in markdown](https://stackoverflow.com/q/35465557/866026) and [Add gray area in markdown](https://stackoverflow.com/q/40828779/866026). – Waylan Aug 02 '17 at 15:17
  • As GitHub Pages uses Jekyll, you probably want to search for how to customize a Jekyll theme. For example, see [Overriding CSS on github pages using slate theme?](https://stackoverflow.com/q/41254582/866026). You should probably check the documentation for the theme you are using. – Waylan Aug 02 '17 at 15:22
  • And for syntax highlighting see [jekyll syntax highlighter not working](https://stackoverflow.com/q/38233170/866026) or [Jekyll Syntax Highlighting Not Working - Classes Are Not Being Added](https://stackoverflow.com/q/32404142/866026). – Waylan Aug 02 '17 at 15:26
  • Thank you for looking at it. I've read through all your links but honestly I am still not able to fix the problem. I don't understand why code block looks differently on Github repo and Github pages :( – yinkouya Aug 03 '17 at 11:53
  • 1
    they look different because they have different styles defined in their CSS. – Waylan Aug 03 '17 at 13:02
  • May I ask where to look for their different css styling? If it's due to css, so far I only noticed the different styling for code block and emojies, others like heading and anchors and images and fine. – yinkouya Aug 03 '17 at 13:30
  • Which theme are you using for your GitHub Pages site? – Waylan Aug 03 '17 at 13:45
  • I don't use theme, I made it from scratch. Here is my [site css](https://github.com/yinkouya/yinkouya.github.io/blob/master/assets/style.css). – yinkouya Aug 03 '17 at 13:59
  • Then edit that file to include some rules defining styles for code blocks (I just checked and you don't have any). If you want it to match GitHub's styles, use your browser's developer tools to inspect the page on GitHub and copy the relevant rules. – Waylan Aug 03 '17 at 14:30
  • Frankly I don't think that's how it works, for now I think it's the way how Jekyll parses markdowns. Thanks anyway. – yinkouya Aug 03 '17 at 14:59

0 Answers0