A kind of |Stop using the markdown theme!

Time:2020-5-28

Front

I found out a long time ago that the use of third-party markdown themes will cause a problem. Today, in the community, I find that there are still people who write articles to recommend this approach. Next I’ll tell you why it’s best not to do this and share some markdown tips. If there is any shortage, please give me some advice!

Third party themes

In the technical community, we often see articles rendered by using the editor markdown theme, whose purpose is to achieve consistent markdown appearance experience in different communities. There are many excellent open-source markdown online editors, such as markdown nice. Here is a simple example:

A kind of |Stop using the markdown theme!

Without theme, the markdown content in the figure above is as follows:

##This is a title

Use theme:

<section
  id="nice"
  Data tool = "mdnice editor"
  data-website="https://www.mdnice.com"
  style="font-size: 16px; color: black; padding: 0 10px; line-height: 1.6; word-spacing: 0px; letter-spacing: 0px; word-break: break-word; word-wrap: break-word; text-align: left; font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, 'PingFang SC', Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; margin-top: -10px;"
>
  <h2 Data tool = "mdnice editor" style="margin-top: 30px; margin-bottom: 15px; padding: 0px; font-weight: bold; color: black; border-bottom: 2px solid rgb(239, 112, 96); font-size: 1.3em;">
    <span class="prefix" style="display: none;"></span
    ><span
      class="content"
      style="display: inline-block; font-weight: bold; background: rgb(239, 112, 96); color: #ffffff; padding: 3px 10px 1px; border-top-right-radius: 3px; border-top-left-radius: 3px; margin-right: 3px;"
    >
      This is a title
    </span>
    <span class="suffix"></span>
    <span style="display: inline-block; vertical-align: bottom; border-bottom: 36px solid #efebe9; border-right: 20px solid transparent;"></span>
  </h2>
</section>

After using the topic, when publishing the article, the text input in the content area of the article is no longer the text of markdown syntax, but the HTML generated by markdown combined with the topic. Markdown supports rendering HTML tags, and many communities support rendering inline styles, so third-party markdown themes can be used.

too bad!

There’s a picture, there’s a truth

A kind of |Stop using the markdown theme!

Except for the last one that does not use the third-party theme, these articles rendered with the third-party theme, in dark mode,Poor visual effect, it’s almost impossible to continue reading the article. Although there is no dark mode in many communities in China, it is still a trend to support dark mode. Many foreign technology communities have already supported the dark mode, and China is also following up. If you don’t want published articles to impose a psychological burden on you, it’s better not to continue to do so, but to use the markdown style built in each community.

Causes

Instead of using the third-party markdown theme, the text directly published is the markdown syntax text, which is parsed into the corresponding style through different communities; if the theme is used, the inline style is directly inserted, which makes it difficult for the community to adapt to all the third-party theme styles in the dark mode.

Other questions

  • Using the theme also produces a lot of redundant code, which makes the CSS style loaded by the original community website useless
  • If the article is long, it may cause slow loading
  • Some third-party themes even carry JS code, which will have a more obvious impact on the loading speed
  • Articles are not easy to save, modify and migrate

proposal

I don’t completely deny the use of third-party markdown theme to publish articles, I just share the problems it may bring to you, and it is almost ignored by everyone.

  • Post to multiple communities: best to use only markdown text
  • Post to only one community: first check whether the community website or app can browse normally in dark mode
  • Use a theme that is compatible with dark mode (probably not yet)

You may be wondering, is there any way to make app or PC community websites compatible with markdown third-party theme dark mode? As mentioned earlier, the third-party theme uses inline style, so it is impossible for app or PC community websites to cover all the emerging third-party markdown themes, and inline style is not easy to be covered. One way (not perfect), GitHub star 1.7k open source projectDarkmode.jsThrough the function similar to “filter”, the dark mode is realized. I annotated its source code and wrote it as a blog. If you are interested, you can click jump to learn about it.

antic

How to edit markdown quickly? If you use the vscode editor (if you use other editors, it is recommended to download it and make it the most standby editor, which is free and open source), you do not need to install any markdown plug-ins. Next, add the following code to thesetting.json

"[markdown]": {
    "editor.quickSuggestions": true
},

It means that you can.mdFile as in other code files.

Next, you only need to define the required quick code snippets:

  1. adoptctrl+shif+pOpen command window
  2. inputsnippets

A kind of |Stop using the markdown theme!

  1. Selectmarkdown.jsonAnd open

A kind of |Stop using the markdown theme!

Take the input JS code fragment as an example, add the following code to the JSON file:

{
    "code js": {
    "prefix": "js",
    "body": [
        "```js",
        "$0",
        "```"
    ],
    "description": "output js"
    },
}
  • name: Code JS snippet name
  • prefix: content used to trigger a snippet
  • body: the content of the generated code fragment, pay attention to the array form
  • $0: last cursor position,${1:label}, ${2:another}: placeholder, placeholders with the same ID are linked
  • description: snippet description

A kind of |Stop using the markdown theme!

So you can set up some commoncode snippetOr fixedEnd of articleYou don’t have to memorize the shortcut keys of the third-party editor or search for the dense formatting buttons.