preface

Some friends are very confused about those beautiful article style is how to write, in fact, is to add HTML tags and styles, the following is a style example, you can directly copy to take to use, of course, you can write or modify.

For example,

1. Background style

Style example

<div style='background: -webkit-linear-gradient(top, transparent 19px, #ececec 20px), -webkit-linear-gradient(left, transparent 19px, #ececec 20px); background-size: 20px 20px; '>Here is all the content of the article</div>
Copy the code

2. Secondary heading style

Style example

<h2 style='color: inherit; line-height: inherit; padding: 0px; Margin: 1.6 em 0 px; font-weight: bold; border-bottom: 2px solid rgb(127, 127, 127); The font - size: 1.3 em. '><span style='font-size: inherit; line-height: inherit; margin: 0px; display: inline-block; font-weight: normal; background: rgb(127, 127, 127); color: rgb(255, 255, 255); padding: 3px 10px 1px; border-top-right-radius: 3px; border-top-left-radius: 3px; margin-right: 3px; '>conclusion</span></h2>
Copy the code

3. Document description styles

Style example

<blockquote style=' padding: 10px 10px 10px 1rem; The font - size: 0.9 em. margin: 1em 0px; color: rgb(0, 0, 0); border-left: 5px solid #10c921; background: rgb(239, 235, 233); '>
    <p>I like fishing<p>
</blockquote>
Copy the code

4. Picture style

<img style='width: auto; max-width: 100%; border-radius: 12px; display: block; margin: 20px auto; object-fit: contain; box-shadow: 2px 4px 7px #999; ' src='https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/3/28/1711f45ff67027c1~tplv-t2oaga2asx-image.image'>
Copy the code

Note that the Nuggets presented the source code like this

! [](https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/3/28/1711fbcfa641412e~tplv-t2oaga2asx-image.image )Copy the code

We need to manually write an img tag to copy the link into SRC and style it

Program transformation

Oh, oh, what if I had lots of titles, lots of documentation descriptions, lots of pictures? How troublesome it is for me to change one by one!

So as a programmer, of course, to write a tool for their own services! The repetitive work can be handed over to a program, so I wrote a style transformation site

Website address: Markdown conversion

Select the theme, upload your Markdown file, return the article you’ve already processed, and copy it directly to the nuggets

Pay attention to

If your article is already written in Denver, and you have uploaded a good image, copy your article to a TXT file, and then when the style conversion, upload your TXT file directly

I have written the article here

I just copy all the articles into a TXT file and upload it


Pay attention to

Site conversion into the style, just my personal preference, convenient for my own conversion style, if the style does not meet your appetite, you can manually modify the style

Read all the articles want this style

Oh, oh, I wish I could see other people’s articles all look like this.

Arrange! So I wrote a browser plugin to modify the style of nuggets

The original nuggets

The style after the plug-in is installed

I felt like I was in heaven

Plug-ins can support multiple themes


Of course, there is also a very powerful feature, if you often have to read code, you have to pull the code left and right to see the full code, so I added an immersion mode

Before opening: There are sidebars on both sides

When open: The sidebar disappears and the reading experience is great!

Installing a plug-in

Plugin address: JTool

Once you’ve downloaded it, unzip it and go to Google Chrome



Then it’s ready to use

Right mouse button to view functions, switch themes and enable immersion mode