Home / Tips & Trick / How to Make Syntax Highlighter Cool on Blogger

How to Make Syntax Highlighter Cool on Blogger

How to Make Syntax Highlighter Cool on Blogger ~ Syntax Highlighter serves to display the contents of the code provided to make it easier for readers if the content presents a code or script and can also be in the form of a tutorial. Syntax Highlighter is needed to enhance the appearance of your website or blog.

I modified the Syntax Highlighter to make it look cool and simple to use, and do not use javascript that is burdensome to your blog of course, here I only use the css feature and for those who have a blog with a niche blogging tutorial, of course you must use this so that readers can more easily understand the contents of the article you have.

This time, I had the opportunity to take the time to increase knowledge of friends, how to make Syntax Highlighter Cool on Blogger Of course it's not difficult. You can modify it according to the color and what you want using the css I shared in this tutorial.

In this article, before I also tried some good pre code or syntax highlighter for bloggers. after sorting out and modifying the script I decided to share it with readers of this blog. so this function is almost the same as the script or blockquote box. but Syntax Highlighter is indeed specifically made to put a long script or code, so that it looks more comfortable you should use this on a blog that you have.

How to Create a Cool Syntax Highlighter on Blogger

Although there are so many who share on the internet, I only share this according to the desires of my design taste, maybe my friend who is looking for a good Syntax Highlighter design for your blog, you can see the demo first in the picture below.

 Make Syntax Highlighter Cool on Blogger "border =" 0 "data-original-height =" 182 "data-original-width =" 753 "src =" https://4.bp.blogspot.com/-rxrJJBFwrxs/W3A- zNjbUYI / AAAAAAAADuw / Z6-6YFHP1DIGesA0LP8mB_jCQ6Fc2K6VQCLcBGAs / s1600 / two. png "title =" How to Make Syntax Highlighter Cool on Blogger "/> </a></div>
<p> Do You Like Syntax Highlighter Like the Picture Above? </p>
<p> If you like, you can follow the guide below: </p>
<p> 1. Blogger Login Blog Account You Are Each </p>
<p> 2. Please Copy the Css Code Below Below … And This CSS Paste Is Right Before the Code <b>]]> </b:skin></b></p>
<blockquote class=

/ * syntax highlighter jagoankode.blogspot.com * /
pre, pre code {color: #FFFFFF} p re {background: # 121835; padding: 8px 10px; overflow: auto; max-width: 100%; text-align: left; margin: 10px auto; border-left: 3px solid # ff0000} code, pre, pre code { font-family: Consolas, Monaco, 'Andale Mono', monospace; white-space: initial; word-spacing: normal; word-break: normal; font-size: 14px; line-height: 1.3em} code {color: #FFFFFF} i. Click url, pre {-webkit-user-select: all; -moz-user-select: all; -ms-user-select: all; user-select: all} blockquote {font-family: Georgia, serif; color: # 141924; border-left: 3px solid #dedede; padding-left: 8px}
/ * Enjoy Your Life * /

3. Save.

How to apply the code above in Blogger posts

There is an application to make Syntax Highlighter earlier in blogger posts. please follow the guidelines below to create this property.

If you have saved the css code, then the next is the application of writing on your blog, the method is quite easy.

1. Make an ordinary article.
2. Move to the HTML Tab as shown below

Loading...

Check Also

Here's How to Change PowerPoint Background (All Office Versions)

Microsoft Power Point was one of the computer programs developed by Microsoft for presentation needs. …

%d bloggers like this: