How to add stylish Syntax Highlighter in Blogger

Post a Comment

Syntax Highlighter certainly does not escape the complex codes contained in a blog or source code editor in a programming language. What is Syntax Highlighter and what does it do? I will explain about Syntax Highlighter and many bloggers call it pre code widget.

How to add Syntax Highlighter in Blogger
How to add Syntax Highlighter in Blogger


What is Syntax Highlighter?

Syntax Highlighter is a special feature of the process of transferring certain programming language codes with writing, text color, exact position as found in a programming language code to be transferred or copied into other written forms so that it is easier to read or learn them.Syntax Highlighter is almost exactly the Blockquote feature but the difference is that the text color blockquote feature is usually only one color, to change the color according to the original code you have to do it manually. So in essence Syntax highlighter will be effective in the process of making or moving it when compared to the blockquote feature.In addition to beautifying the appearance of lines of code in blog posts, the use of Syntax Highlighter is also intended for readers to easily recognize the type of code provided by the author. Another effect of using Syntax Highlighter is that visitors will feel more comfortable reading the content of the blog, and the blog administrator or admin will make it more professional in presenting articles on their tutorial blog.Here I will give the tutorial with several background color choices.

How to add a Syntax Highlighter on blogger?


1. Login to Blogger> Templates> Click Edit HTML 2. Save the code below before the code </head>

<script src="https://cdn.jsdelivr.net/gh/Arlina-Design/[email protected]/highlightpacks.js"/>
<script>hljs.initHighlightingOnLoad();
</script>


3. Save the code below before code </head>

Choose one of the CSS codes below that you like the background color and text color
<style>
/* POJOAQUE STYLE by Donodpro */

pre code{display:block;padding:0.5em;color:#DCCF8F;background:url(https://sites.google.com/site/problogiz/home/pojoaque.jpg) repeat scroll left top #181914}

pre .comment,pre .template_comment,pre .diff .header,pre .doctype,pre .lisp .string,pre .javadoc{color:#586e75;font-style:italic}

pre .keyword,pre .css .rule .keyword,pre .winutils,pre .javascript .title,pre .method,pre .addition,pre .css .tag,pre .clojure .title,pre .nginx .title{color:#B64926}

pre .number,pre .command,pre .string,pre .tag .value,pre .phpdoc,pre .tex .formula,pre .regexp,pre .hexcolor{color:#468966}

pre .title,pre .localvars,pre .function .title,pre .chunk,pre .decorator,pre .built_in,pre .lisp .title,pre .clojure .built_in,pre .identifier,pre .id{color:#FFB03B}

pre .attribute,pre .variable,pre .lisp .body,pre .smalltalk .number,pre .constant,pre .class .title,pre .parent,pre .haskell .type{color:#b58900}

pre .css .attribute{color:#b89859}

pre .css .number,pre .css .hexcolor{color:#DCCF8F}

pre .css .class{color:#d3a60c}

pre .preprocessor,pre .pi,pre .shebang,pre .symbol,pre .symbol .string,pre .diff .change,pre .special,pre .attr_selector,pre .important,pre .subst,pre .cdata{color:#cb4b16}

pre .deletion{color:#dc322f}

pre .tex .formula{background:#073642}

</style>


Or

<style>
/* SOLARIZED DARK STYLE by Donodpro */

pre code{display:block;padding:0.5em;background:#002b36;color:#839496}

pre .comment,pre .template_comment,pre .diff .header,pre .doctype,pre .pi,pre .lisp .string,pre .javadoc{color:#586e75;font-style:italic}

pre .keyword,pre .winutils,pre .method,pre .addition,pre .css .tag,pre .request,pre .status,pre .nginx .title{color:#859900}

pre .number,pre .command,pre .string,pre .tag .value,pre .phpdoc,pre .tex .formula,pre .regexp,pre .hexcolor{color:#2aa198}

pre .title,pre .localvars,pre .chunk,pre .decorator,pre .built_in,pre .identifier,pre .vhdl .literal,pre .id{color:#268bd2}

pre .attribute,pre .variable,pre .lisp .body,pre .smalltalk .number,pre .constant,pre .class .title,pre .parent,pre .haskell .type{color:#b58900}

pre .preprocessor,pre .preprocessor .keyword,pre .shebang,pre .symbol,pre .symbol .string,pre .diff .change,pre .special,pre .attr_selector,pre .important,pre .subst,pre .cdata,pre .clojure .title{color:#cb4b16}

pre .deletion{color:#dc322f}

pre .tex .formula{background:#073642}

</style>


Or

<style>
/* RAINBOW STYLE by Donodpro */

pre::-moz-selection{background:#FF5E99;color:#fff;text-shadow:none}

pre::selection{background:#FF5E99;color:#fff;text-shadow:none}

pre code{display:block;padding:0.5em;background:#474949;color:#D1D9E1}

pre .body,pre .collection{color:#D1D9E1}

pre .comment,pre .template_comment,pre .diff .header,pre .doctype,pre .lisp .string,pre .javadoc{color:#969896;font-style:italic}

pre .keyword,pre .clojure .attribute,pre .winutils,pre .javascript .title,pre .addition,pre .css .tag{color:#cc99cc}

pre .number{color:#f99157}

pre .command,pre .string,pre .tag .value,pre .phpdoc,pre .tex .formula,pre .regexp,pre .hexcolor{color:#8abeb7}

pre .title,pre .localvars,pre .function .title,pre .chunk,pre .decorator,pre .built_in,pre .lisp .title,pre .identifier{color:#b5bd68}

pre .class .keyword{color:#f2777a}

pre .variable,pre .lisp .body,pre .smalltalk .number,pre .constant,pre .class .title,pre .parent,pre .haskell .label,pre .id,pre .lisp .title,pre .clojure .title .built_in{color:#ffcc66}

pre .tag .title,pre .rules .property,pre .django .tag .keyword,pre .clojure .title .built_in{font-weight:bold}

pre .attribute,pre .clojure .title{color:#81a2be}

pre .preprocessor,pre .pi,pre .shebang,pre .symbol,pre .symbol .string,pre .diff .change,pre .special,pre .attr_selector,pre .important,pre .subst,pre .cdata{color:#f99157}

pre .deletion{color:#dc322f}

pre .tex .formula{background:#eee8d5}

</style>


Or

<style>
/* MONOKAI STYLE by Donodpro */

pre code{display:block;padding:0.5em;background:#272822}

pre .tag,pre .tag .title,pre .keyword,pre .literal,pre .change,pre .winutils,pre .flow,pre .lisp .title,pre .clojure .built_in,pre .nginx .title,pre .tex .special{color:#F92672}

pre code{color:#DDD}

pre code .constant{color:#66D9EF}

pre .class .title{color:white}

pre .attribute,pre .symbol,pre .symbol .string,pre .value,pre .regexp{color:#BF79DB}

pre .tag .value,pre .string,pre .subst,pre .title,pre .haskell .type,pre .preprocessor,pre .ruby .class .parent,pre .built_in,pre .sql .aggregate,pre .django .template_tag,pre .django .variable,pre .smalltalk .class,pre .javadoc,pre .django .filter .argument,pre .smalltalk .localvars,pre .smalltalk .array,pre .attr_selector,pre .pseudo,pre .addition,pre .stream,pre .envvar,pre .apache .tag,pre .apache .cbracket,pre .tex .command,pre .prompt{color:#A6E22E}

pre .comment,pre .java .annotation,pre .python .decorator,pre .template_comment,pre .pi,pre .doctype,pre .deletion,pre .shebang,pre .apache .sqbracket,pre .tex .formula{color:#75715E}

pre .keyword,pre .literal,pre .css .id,pre .phpdoc,pre .title,pre .haskell .type,pre .vbscript .built_in,pre .sql .aggregate,pre .rsl .built_in,pre .smalltalk .class,pre .diff .header,pre .chunk,pre .winutils,pre .bash .variable,pre .apache .tag,pre .tex .special,pre .request,pre .status{font-weight:bold}

pre .coffeescript .javascript,pre .javascript .xml,pre .tex .formula,pre .xml .javascript,pre .xml .vbscript,pre .xml .css,pre .xml .cdata{opacity:0.5}

</style>


Or

<style>
/* TOMMOROW NIGHT BLUE STYLE by Donodpro */

.tomorrow-comment,pre .comment,pre .title{color:#7285b7}

.tomorrow-red,pre .variable,pre .attribute,pre .tag,pre .regexp,pre .ruby .constant,pre .xml .tag .title,pre .xml .pi,pre .xml .doctype,pre .html .doctype,pre .css .id,pre .css .class,pre .css .pseudo{color:#ff9da4}

.tomorrow-orange,pre .number,pre .preprocessor,pre .built_in,pre .literal,pre .params,pre .constant{color:#ffc58f}

.tomorrow-yellow,pre .class,pre .ruby .class .title,pre .css .rules .attribute{color:#ffeead}

.tomorrow-green,pre .string,pre .value,pre .inheritance,pre .header,pre .ruby .symbol,pre .xml .cdata{color:#d1f1a9}

.tomorrow-aqua,pre .css .hexcolor{color:#99ffff}

.tomorrow-blue,pre .function,pre .python .decorator,pre .python .title,pre .ruby .function .title,pre .ruby .title .keyword,pre .perl .sub,pre .javascript .title,pre .coffeescript .title{color:#bbdaff}

.tomorrow-purple,pre .keyword,pre .javascript .function{color:#ebbbff}

pre code{display:block;background:#002451;color:white;padding:0.5em}

pre .coffeescript .javascript,pre .javascript .xml,pre .tex .formula,pre .xml .javascript,pre .xml .vbscript,pre .xml .css,pre .xml .cdata{opacity:0.5}

</style>


Or

<style>
/* SUNBURST STYLE by Donodpro */

pre code{display:block;padding:0.5em;background:#000;color:#f8f8f8}

pre .comment,pre .template_comment,pre .javadoc{color:#aeaeae;font-style:italic}

pre .keyword,pre .ruby .function .keyword,pre .request,pre .status,pre .nginx .title{color:#E28964}

pre .function .keyword,pre .sub .keyword,pre .method,pre .list .title{color:#99CF50}

pre .string,pre .tag .value,pre .cdata,pre .filter .argument,pre .attr_selector,pre .apache .cbracket,pre .date,pre .tex .command{color:#65B042}

pre .subst{color:#DAEFA3}

pre .regexp{color:#E9C062}

pre .title,pre .sub .identifier,pre .pi,pre .tag,pre .tag .keyword,pre .decorator,pre .shebang,pre .prompt{color:#89BDFF}

pre .class .title,pre .haskell .type,pre .smalltalk .class,pre .javadoctag,pre .yardoctag,pre .phpdoc{text-decoration:underline}

pre .symbol,pre .ruby .symbol .string,pre .number{color:#3387CC}

pre .params,pre .variable,pre .clojure .attribute{color:#3E87E3}

pre .css .tag,pre .rules .property,pre .pseudo,pre .tex .special{color:#CDA869}

pre .css .class{color:#9B703F}

pre .rules .keyword{color:#C5AF75}

pre .rules .value{color:#CF6A4C}

pre .css .id{color:#8B98AB}

pre .annotation,pre .apache .sqbracket,pre .nginx .built_in{color:#9B859D}

pre .preprocessor{color:#8996A8}

pre .hexcolor,pre .css .value .number{color:#DD7B3B}

pre .css .function{color:#DAD085}

pre .diff .header,pre .chunk,pre .tex .formula{background-color:#0E2231;color:#F8F8F8;font-style:italic}

pre .diff .change{background-color:#4A410D;color:#F8F8F8}

pre .addition{background-color:#253B22;color:#F8F8F8}

pre .deletion{background-color:#420E09;color:#F8F8F8}

pre .coffeescript .javascript,pre .javascript .xml,pre .tex .formula,pre .xml .javascript,pre .xml .vbscript,pre .xml .css,pre .xml .cdata{opacity:0.5}

</style>


4. If you have installed the highlighter style or syntax theme you want in your template, now save your template.

How to use Syntax Highlighter in blog post?


Use the HTML markup below to enable Syntax Highlighter when you want to display source code, such as Javascript code, CSS, and HTML markup in your posts.

<pre><code>
Here add css,javascript and parsed Html code

</code>
</pre>


Those are tips on How to Make Syntax Highlighter on Blogger from Donod, thank you and if you have problem to use this then comment below.

DonodNet
Donod.net is a new online platform, aim to provides people with the opportunity to build and grow their business & Recipes.

Related Posts

Post a Comment