Markdown article style optimization practical experience_html/css_WEB-ITnose

I posted a blog yesterday: Rice Ball (0): A development tool to improve efficiency. But the default font is too small. Very unfriendly to readers. You can customize the CSS in the blog garden. It’s still some time before work, so I decided to do it myself.

Round 1

I remember there was a blog in Yuanzi a few days ago saying that Markdown is very popular. Let’s see if there is anything we can learn from it.
Markdown syntax Chinese version, unfortunately, it is just an introduction to Markdown syntax. And this blog was not written in Markdown. . .
So there is no gain at this stage~

Round 2

Writing CSS by yourself is naturally a thankless task. So we found someone else to write it. Although I really want to use Mark Dumbo's CSS. But I guess there are copyright issues. So make sure to use github's style.

Round 3

Google, keyword github markdown css

Found about 521,000 results (took 0.36 seconds)`

Look at the first one not bad. github: sindresorhus/github-markdown-css
An open source (MIT license, free to use) project.

There is a CSS file github-markdown.css in the project with embedded fonts. It feels pretty good. But I checked, and it seems that the external container of the blog park is not .markdown-body, but .cnblogs-markdown. This needs to be changed. I don’t know if there will be other conflicts.

So, let’s look for something else, preferably CSS for the blog garden.

Round 4

Find some blogs.

Extending the markdown editor of Blog Park
is just an extension and does not involve CSS

New version of markdown function released! Support github flavored markdown!
It seems that the code of the new version of Blog Park is very similar to Github. So the question is, can the CSS used for the blog park still be used now?

Sublog: A cross-platform blog client that supports Markdown and syntax highlighting
Seems like a good solution. But I still use Mark Dumbo for writing. markdown.css seems not to have outer container filtering added.

Using Markdown to write blogs in the blog garden
It seems that it may conflict with the CSS of the template. If you need to change the template, it will be complicated. . .
And the last paragraph of CSS

<style>/* ... */.markdown-body img {  max-width: 100%}</style>

is obviously different from the blog park. (See Round 3)

So I decided to give up and continue searching. I feel that the CSS found in Round 3 is very good. It should be well maintained.

Round 5

So, we stood on the basis of the giant and forked a version, targeting the style of Markdown articles in the blog park.

Step 1

Fork it! So I got github: huizhong/github-markdown-css

Step 2

Modify the external container. Replace all .markdown-body with .cnblogs-markdown commit

Step 3

Copy the contents of the github-markdown.css file to the page customization CSS code in the CSS settings of the blog park.

Step4

Testing rice balls (0): development tools to improve efficiency
It feels good~

Summary

It took an hour and it was completed desired goal. (80% of the time is spent on on-site blogging :P)
First there is demand. Later decide what you want to make. Then research. The last step is to change the code.
In fact, the truly "useful" work can be done in one minute. Sharpening the knife will not make you a chopping wood.
In fact, there are some subsequent improvements. For example, if the title is too small, modify the project we forked. Add instructions. Come back after get off work~ Go to work.