These days I found out the very useful feature on Visual Studio Code for markdown editing, which renders the MD file on VSCode itself, opening a new tab at right.
However, the rendered markdown styles matches VSCode itself. Since I mainly use markdown on GitHub, I’d like to preview the markdown using GitHub style. So I inspected GitHub and made a quick CSS file to VSCode:
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * Save this file and tell VSCode to use it: | |
| * "markdown.styles": ["/home/your_name/.config/Code/User/github-markdown.css"] | |
| */ | |
| body { | |
| font-family: Arial; | |
| font-size: 16px; | |
| margin-top: 18px; | |
| color: #24292e; | |
| } | |
| h1, h2, h3 { | |
| font-weight: 600; | |
| line-height: 1.25; | |
| margin-top: 24px; | |
| margin-bottom: 16px; | |
| padding-bottom: .3em; | |
| } | |
| h1, h2 { | |
| border-bottom: 1px solid #eaecef; | |
| } | |
| h1 { font-size: 2em; } | |
| h2 { font-size: 1.5em; } | |
| h3 { font-size: 1.25em; } | |
| h4 { font-size: 16px; } | |
| h5 { font-size: 14px; } | |
| h6 { font-size: 12px; } | |
| p { | |
| line-height: 1.5; | |
| margin-top: 0; | |
| margin-bottom: 16px; | |
| } | |
| pre, code { | |
| font-family: "SFMono-Regular",Consolas,"Liberation Mono",Menlo,Courier,monospace; | |
| font-size: 10pt; | |
| } | |
| pre { | |
| margin: 0; | |
| } | |
| p code { | |
| padding: .2em .4em; | |
| background-color: rgba(27,31,35,.05); | |
| line-height: 1.5; | |
| } |
Save the file and add this entry to VSCode user settings, which on Linux looks like this:
"markdown.styles": ["/home/your_name/.config/Code/User/eu-markdown.css"]
The markdown preview should be pretty close to GitHub styling now.