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