Hello blogger friends, this time fixiw will discuss the Syntax Highlighter and how to install it on the blog page, the first we will discuss first, what is Syntax Highlighter?
Syntax Highlighter is a text editor that focuses on writing code markup on a web page aimed at making it easier for visitors to recognize the entire code, either from the color of the code or its structure and font.
How to Install Syntax Highlighter Like Igniel on Blogger
We can implement it from the higlighter syntax on website pages, online forums and blogs and it is also widely used to make it easier for visitors to mark up CSS, HTML, Javascript and other programming languages.
In general, this higlighter syntax can make letters into many color variants depending on the markup code. but in this tutorial, I will only create one color and will only use CSS. if you want to install please follow the tutorial below.
How to Install Syntax Highlighter on Blogger
If so, please add the following CSS code below and place it right above the code ]]> </ b: skin> or </style>
/* Syntax Highlighter By fixiw.com */
.post-body pre,
#comments pre {
background-color: #292e34; /* Code Color For Background */
border-left: 5px solid #008c5f; /* Code Color For Border */
padding: 0;
margin: 0.5em auto;
position: relative;
white-space: pre;
word-wrap: break-word;
word-break: normal;
overflow: auto;
-moz-tab-size: 2;
-o-tab-size: 2;
tab-size: 2;
user-select: text;
-webkit-user-select: text;
-khtml-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}
.post-body pre code,
#comments pre code {
display: block;
color: #bfbf90; /* Code Color By fixiw.com */
font-size: 13px; /* Code Color For Font */
max-height: 250px;
padding: 10px 15px;
line-height: 1.5em;
white-space: pre;
overflow: auto;
user-select: text;
-webkit-user-select: text;
-khtml-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
}
.post-body pre code span {
color: #95b2f6;
font-style: italic;
}
.post-body pre mark,
.post-body code mark,
.post-body pre code mark {
background-color: #95b2f6;
color: #292e34;
margin: 0;
padding: 0;
}
.post-body code,
.post-body code.tutor {
color: #d85555;
letter-spacing: -0.3px;
font-size: 1em;
user-select: text;
-webkit-user-select: text;
-khtml-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
}
.post-body pre.html:before,
.post-body pre.css:before,
.post-body pre.javascript:before,
.post-body pre.jquery:before {
background-color: #bde0b9; /* Code Color For Background */
font: 500 14px "Google Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Oxygen", "Roboto", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif;
color: #333333; /* code By fixiw */
display: block;
padding: 10px 35px;
font-size: 16px;
background-repeat: no-repeat;
background-size: 20px 20px;
background-position-x: 7px;
background-position-y: center;
}
.post-body pre.html:before {
content: "HTML";
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12,17.56L16.07,16.43L16.62,10.33H9.38L9.2,8.3H16.8L17,6.31H7L7.56,12.32H14.45L14.22,14.9L12,15.5L9.78,14.9L9.64,13.24H7.64L7.93,16.43L12,17.56M4.07,3H19.93L18.5,19.2L12,21L5.5,19.2L4.07,3Z' fill='%231d2129'/%3E%3C/svg%3E");
}
.post-body pre.css:before {
content: "CSS";
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5,3L4.35,6.34H17.94L17.5,8.5H3.92L3.26,11.83H16.85L16.09,15.64L10.61,17.45L5.86,15.64L6.19,14H2.85L2.06,18L9.91,21L18.96,18L20.16,11.97L20.4,10.76L21.94,3H5Z' fill='%231d2129'/%3E%3C/svg%3E");
}
.post-body pre.javascript:before {
content: "Javascript";
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3,3H21V21H3V3M7.73,18.04C8.13,18.89 8.92,19.59 10.27,19.59C11.77,19.59 12.8,18.79 12.8,17.04V11.26H11.1V17C11.1,17.86 10.75,18.08 10.2,18.08C9.62,18.08 9.38,17.68 9.11,17.21L7.73,18.04M13.71,17.86C14.21,18.84 15.22,19.59 16.8,19.59C18.4,19.59 19.6,18.76 19.6,17.23C19.6,15.82 18.79,15.19 17.35,14.57L16.93,14.39C16.2,14.08 15.89,13.87 15.89,13.37C15.89,12.96 16.2,12.64 16.7,12.64C17.18,12.64 17.5,12.85 17.79,13.37L19.1,12.5C18.55,11.54 17.77,11.17 16.7,11.17C15.19,11.17 14.22,12.13 14.22,13.4C14.22,14.78 15.03,15.43 16.25,15.95L16.67,16.13C17.45,16.47 17.91,16.68 17.91,17.26C17.91,17.74 17.46,18.09 16.76,18.09C15.93,18.09 15.45,17.66 15.09,17.06L13.71,17.86Z' fill='%231d2129'/%3E%3C/svg%3E");
}
.post-body pre.jquery:before {
content: "jQuery";
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22.88,10.41C20.77,12.18 17.61,11.9 15.84,9.79C14.06,7.67 14.34,4.5 16.45,2.75L16.96,2.37C15.27,4.19 15.16,7.03 16.8,9C18.43,10.94 21.25,11.32 23.34,9.97L22.88,10.41M21.1,14.5C17.93,17.17 13.2,16.76 10.54,13.58C7.87,10.41 8.29,5.68 11.46,3L12.38,2.36C9.96,5.09 9.84,9.26 12.26,12.14C14.68,15 18.8,15.63 21.91,13.72L21.1,14.5M19.97,19.38C15.53,23.11 8.9,22.53 5.17,18.08C1.45,13.64 2.03,7 6.47,3.29L7.58,2.5C4.07,6.3 3.85,12.23 7.28,16.32C10.71,20.4 16.59,21.22 20.96,18.43L19.97,19.38Z' fill='%231d2129'/%3E%3C/svg%3E");
}
If you have apply above procedure, please save the theme.
How to use Syntax Highlighter on Blogger
For how to apply the highlighter syntax to your blog post, you just have to call it using the code <pre> and <code> as in the example below.
<pre class="html"><code>
Paste Your HTML Code Here
</code></pre>
<pre class="css"><code>
Paste Your CSS Code Here
</code></pre>
<pre class="javascript"><code>
Paste Your JavaScript Code Here
</code></pre>
<pre class="jquery"><code>
Paste Your Jquery Code Here
</code></pre>
Outcomes :
Well, that's the discussion this time about How to Install Syntax Highlighter on Blogger and this version is lighter and simpler. hope it's useful, friend.
Post a Comment