A blog garden code highlighting Solution

Preface

Although the blog Park has a high degree of customization, it is not very good to highlight the code. The default color scheme looks uncomfortable and affects the overall coordination of the page.

However, because of its high customization, We can customize the code highlighting style.

Implemented with pure CSS without JS permissions.

Insert code for the blog Garden

This topic is only discussed in the tinymce editor of the blog Park. I have not tested the code highlighting resolution scheme of other editors (such as markdown.

There are two solutions to insert code into the blog garden.

.

The two insert codes use different highlighted resolution schemes, which have their own advantages and disadvantages. I have adapted both solutions.

I personally recommend the first highlight solution.

To directly use the code, go to the last chapter.

First, insert the default effect to the code

Effect after custom highlight

 

Advantages and disadvantages

The code is highlighted in detail, but you need to press the copy button to copy the code. The copy interface and button are ugly and the format is uncomfortable.

If it is collapsed by default, there will be ugly expansion and contraction icons.

 

This highlight directly writes CSS in the style. I have to use the [Style = "color: XXX;"] selector to match.

Suggestions

This is used when a large amount of code is inserted and the reader needs to copy it. If you need to read it on your mobile phone, use this.

The second type of code inserts the default Effect

Effect after custom highlight

Advantages and disadvantages

Code highlighting is not very detailed (for example, numbers are not highlighted), and the number column on the mobile phone will be misplaced, but the overall is more refined.

Many elements,And dynamic rendering.If the code is long, rendering operations will take up a lot.

Suggestions

If you use this method when there is a small amount of code, read it on your computer. If your blog reader is reading it on a mobile phone, do not use it.

 

Highlight CSS code

This is the highlight I am currently using.

The following CSS is applicable to two insert methods. paste the following code into "blog background-settings-custom page CSS code.

1/* First highlight start */2. syntaxhighlighter. Bold {3 font-weight: unset! Important; 4} 5. syntaxhighlighter. Line {6 background-color: RGB (40, 43, 46 )! Important; 7} 8. syntaxhighlighter. Line. alt2 {9 background-color: RGB (40, 43, 46 )! Important; 10} 11. syntaxhighlighter. Line. alt1 {12 background-color: RGB (40, 43, 46 )! Important; 13} 14. syntaxhighlighter. Comments,. syntaxhighlighter. Comments A {15 color: RGB (129,142,150 )! Important; 16} 17. syntaxhighlighter. Keyword {18 color: RGB (147,199, 99 )! Important; 19 font-weight: unset! Important; 20} 21. syntaxhighlighter. Preprocessor {22 color: RGB (85,113,130 )! Important; 23} 24. syntaxhighlighter. Plain,. syntaxhighlighter. Plain A {25 color: RGB (224,226,228 )! Important; 26} 27. syntaxhighlighter. color1,. syntaxhighlighter. color1 A {28 color: RGB (147,199, 99 )! Important; 29} 30. syntaxhighlighter. String,. syntaxhighlighter. String a {31 color: RGB (236,118, 0 )! Important; 32} 33. syntaxhighlighter. functions {34 color: RGB (140,187,173 )! Important; 35} 36. syntaxhighlighter. gutter. Line {37 Border-Right: 2px solid RGB (147,199, 99 )! Important; 38} 39. syntaxhighlighter. Collapsed. toolbar {40 Background: RGB (40, 43, 46 )! Important; 41 border: none! Important; 42 border-radius: 5px! Important; 43} 44. syntaxhighlighter. Collapsed. toolbar A {45 color: RGB (147,199, 99 )! Important; 46} 47. syntaxhighlighter. Collapsed. toolbar A: hover {48 color: RGB (78,109, 48 )! Important; 49} 50. syntaxhighlighter {51 border-radius: 5px; 52} 53/* First highlight end, second highlight start */54. cnblogs_code {55 Background: # 282b2e; 56 border-radius: 5px; 57 border: none; 58 font-family: consolas! Important; 59} 60. cnblogs_code_toolbar {61 Background: # 282b2e! Important; 62} 63. cnblogs_code_toolbar A: hover ,. cnblogs_code_toolbar A: Link ,. cnblogs_code_toolbar A: visited ,. cnblogs_code_toolbar A: active ,. cnblogs_code_toolbar A: link IMG ,. cnblogs_code_toolbar A: visited IMG {64 background-color: # 282b2e! Important; 65 border: none! Important; 66} 67. cnblogs_code pre {68 font-family: Las las! Important; 69 padding-left: 3px; 70 color: RGB (224,226,228); 71} 72. cnblogs_code span [Style = "color: #000000;"] {73 color: RGB (224,226,228 )! Important; 74} 75. cnblogs_code span [Style = "color: # 0000ff;"] {76 color: RGB (147,199, 99 )! Important; 77} 78. cnblogs_code span [Style = "color: #800080;"] {79 color: # ffd740! Important; 80} 81. cnblogs_code span [Style = "color: #800000;"] {82 color: RGB (236,118, 0 )! Important; 83} 84. cnblogs_code span [Style = "color: #008000;"] {85 color: RGB (129,142,150 )! Important; 86} 87. cnblogs_code span [Style = "color: #008080;"] {88 color: # afaf! Important; 89 margin-Right: 5px; 90} 91. cnblogs_code_collapse {92 border: none; 93 Background: # 282b2e; 94 color: RGB (147,199, 99); 95} 96. postbody IMG {97 max-width: 100%! Important; 98 margin-top:-5px; 99 margin-left: 5px; 100} 101/* Second highlighted end */

You are welcome to ask questions and suggestions in the comment area.

A blog garden code highlighting Solution