Sample code for implementing markdown automatic numbering with pure CSS

The origin of the problem

The first time I paid attention to the issue of title numbering should be back to the time when I was writing my undergraduate thesis. At that time, I also touched upon this topic separately. Word has a very good feature called cascading titles. After setting it up once, you only need to set the title style to automatically number the titles according to the set title numbering method. All we have to do is set the corresponding title to the corresponding basic title style. I love this method and have been using it for many years. This completely solves the problem of manually adjusting the chapter numbers due to inserting a chapter or a section in the middle. Of course, the picture numbering and naming are also similar.

Until I started using markdown, due to the switching of various editors, there has been no good alternative, so a few years ago I wrote a small tool to do this using the command line, rawbin-/markdown-clear. This tool solved the problem of writing blogs on GitHub, and at the same time solved the problem of posting on various platforms. Because the numbers are written in scripts, it is natural to use markdown here to post on various platforms and convert it into HTML, which also solves the problems at this stage.
A few days ago, I wrote a summary of my comprehensive understanding of the months of arrears. Suddenly, I didn’t want to use this script to number them, and an idea came to my mind: Is it possible to automatically number them without manual numbering? Then we have the following content.

Solve the problem first

The following operation cases are all produced in macOS. There may be slight differences on other platforms, but the content remains the same.

• Write markdown automatically numbering in typora
• Open typora【Preferences】
• Find [Appearance] => [Theme] => [Open Theme Folder]

Add the following code to base.user.css in the open directory

#writer {
    counter-reset:h1
}

h1 {
    counter-reset:h2
}

h2 {
    counter-reset: h3
}

h3 {
    counter-reset:h4
}

h4 {
    counter-reset: h5
}

h5 {
    counter-reset: h6
}

#writer h1:before {
    counter-increment: h1;
    content: counter(h1) ". "
}

#writer h2:before {
    counter-increment: h2;
    content: counter(h1) "." counter(h2) ". "
}

#writer h3:before {
    counter-increment: h3;
    content: counter(h1) "." counter(h2) "." counter(h3) ". "
}

#writer h4:before {
    counter-increment: h4;
    content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) ". "
}

#writer h5:before {
    counter-increment: h5;
    content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) ". "
}

#writer h6:before{
    counter-increment: h6;
    content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) ". "
}

Reasonable

• Open typora【Preferences】
• Find [General] => [Advanced] => [Enable debug mode] => check
• Then in non-source code mode => [right click] => [Inspect Element], you can see why it is #write
• This will be useful later.

Write markdown blog automatically numbered in github pages

I use the template from jekyllbootstrap.com, which is relatively simple

Open any article in rawbin-.github.io, then [right click] => [Inspect]
You can get two contents

• The container class is .content, strictly speaking #wrap .content
• The style file is in assets/themes/bootstrap3, you can modify the css/style.css under it

Change the following content to assets/themes/bootstrap3/css/style.css in the source code

.content {
    counter-reset:h1
}

h1 {
    counter-reset:h2
}

h2 {
    counter-reset: h3
}

h3 {
    counter-reset:h4
}

h4 {
    counter-reset: h5
}

h5 {
    counter-reset: h6
}

.content h1:before {
    counter-increment: h1;
    content: counter(h1) ". "
}

.content h2:before {
    counter-increment: h2;
    content: counter(h1) "." counter(h2) ". "
}

.content h3:before {
    counter-increment: h3;
    content: counter(h1) "." counter(h2) "." counter(h3) ". "
}

.content h4:before {
    counter-increment: h4;
    content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) ". "
}

.content h5:before {
    counter-increment: h5;
    content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) ". "
}

.content h6:before{
    counter-increment: h6;
    content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) ". "
}

Automatic coding in other web editors

For example, various blog platforms, various self-media platforms, etc., like Yuque, which we often use to write documents, can be used.

This involves a browser plug-in called markdown here, which can automatically convert markdown into a web page in the rich text editor of the page. This is also the routine I mentioned earlier for posting on various platforms in recent years. Just write the numbered and titled markdown and paste it into the editor, then click, and it's done.

Simple attempt

• markdown here has a configuration page where you can configure and adjust css and preview the effect
• A quick look shows that js is used to convert classes into style attributes, and pseudo-classes are not supported.
• Modify source code
  
• Go to adam-p/markdown-here and you will see that the code has not been touched for two years.
• No matter what, fork it to rawbin-/markdown-here and then pull the code down
• First create the css file src/common/auto-number-title, and find the container class in the markdown here options page.markdown-here-wrapper

.markdown-here-wrapper {
    counter-reset:h1
}

.markdown-here-wrapper h1 {
    counter-reset:h2
}

.markdown-here-wrapper h2 {
    counter-reset: h3
}

.markdown-here-wrapper h3 {
    counter-reset:h4
}

.markdown-here-wrapper h4 {
    counter-reset: h5
}

.markdown-here-wrapper h5 {
    counter-reset: h6
}

.markdown-here-wrapper h1:before {
    counter-increment: h1;
    content: counter(h1) ". "
}

.markdown-here-wrapper h2:before {
    counter-increment: h2;
    content: counter(h1) "." counter(h2) ". "
}

.markdown-here-wrapper h3:before {
    counter-increment: h3;
    content: counter(h1) "." counter(h2) "." counter(h3) ". "
}

.markdown-here-wrapper h4:before {
    counter-increment: h4;
    content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) ". "
}

.markdown-here-wrapper h5:before {
    counter-increment: h5;
    content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) ". "
}

.markdown-here-wrapper h6:before{
    counter-increment: h6;
    content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) ". "
}

• Then modify the injection configuration to allow loading of this style file and introduce this style problem
• The rest are wrong, just correct them.

Final output and application

• Clone rawbin-/markdown-here
• Open Chrome and click on the three dots in Settings => [More Tools] => [Extensions]
• Open [Developer Mode]
• Select [Load unpacked extension] => Select the src directory under the cloned code to install and load the plug-in
• Pin the plugin to the plugin bar for easy use
• The content of auto-number-title.scss is as follows

.markdown-here-wrapper {
    counter-reset: h1;
    h1 {
        counter-reset: h2;
        &:before {
            counter-increment: h1;
            content: counter(h1) ". ";
        }
    }
    h2 {
        counter-reset: h3;
        &:before {
            counter-increment: h2;
            content: counter(h1) "." counter(h2) ". "
        }
    }
    h3 {
        counter-reset: h4;
        &:before {
            counter-increment: h3;
            content: counter(h1) "." counter(h2) "." counter(h3) ". "
        }
    }
    h4 {
        counter-reset: h5;
        &:before {
            counter-increment: h4;
            content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) ". "
        }
    }
    h5 {
        counter-reset: h6;
        &:before {
            counter-increment: h5;
            content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) ". "
        }
    }
    h6:before{
        counter-increment: h6;
        content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) ". "
    }
}

Let me briefly explain the principle

CSS Auto Numbering

It’s not a new feature, or rather an old one, which appeared in CSS 2.1. You can find it by searching site:w3.org css automatic numbering. Of course, as of today, later versions (CSS 3, CSS 2.2) have this feature. From caniuse, you can see that it is compatible with IE8 and above. Isn’t it great?

Simple description

• counter-reset
• counter-increment ++
• counter() value
• Use before and after
• For more tips, see CSS The Defiiniitiive Guide 4th. Here is the translation gdut-yy/CSS-The-Definitive-Guide-4th-zh

Chrome plugin or extension development

I haven't actually done this, but I read a book about it.

Reference Materials

• Official Documentation
• sxei/chrome-plugin-demo or search for Chrome plugin guide
• "Chrome Extension and Application Development", this is the old book I read before

There are still some problems that have not been solved

• The above operation method must be arranged in sequence from h1 to h6, otherwise it will look very good
• It would be bad if the title itself was numbered.
• These two problems can be seen in my github blog. The solution can be to run ``

By the way, explore other variable contents of CSS

CSS variables or custom properties

This IE is not compatible, other browsers are compatible with higher versions

:root{
    --var-test:xxx
}
.body{
    --var-test:ooo;
    prop-test:var(--var-test)
}

attr()

• This caniuse is a little unclear. The main compatibility also starts from IE8, so you need to summarize it yourself
• The powerful part is that it can read attribute values ​​and assign them to other attributes, that is, it can have attribute linkage

It looks like the pure CSS solution has come to an end.

• If you can have scripts involved, you will be free
• attr() is a good way to communicate between JS and CSS.

This concludes this article about sample code for implementing markdown automatic numbering with pure CSS. For more relevant CSS markdown automatic numbering content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!