How To Implement Prismjs Syntax Highlighting To Your Blogger/Blogspot For Improve Formatting
Are yet wondering what's PrismJs ? Check it's official page(website) for to a greater extent than information http://prismjs.com/, it's the mo generation of syntax highlighting, it is to a greater extent than lightweight as well as that doesn't acquit on your page charge fourth dimension at all.
The overall adding physical care for is the same equally mentioned on the PrismJS official page but at that topographic point are yet or thus modifications involve to endure made if y'all desire it to move properly on Blogger blogs. In this tutorial i volition render the links to minified version of the codes, in 1 trial y'all acquire the stance close adding it, y'all tin role whatever version y'all want.
How To Add PrismJs on Your Blogger
• Firstly login into your blogger site.
• After y'all bring logged inward become to your Dashboard as well as click on theme
• Proceed past times clicking Edit HTML
• After the Edit HTML has loaded press CTRL + F as well as search for </head>
• Copy as well as glue the code given below simply earlier </head>
<link rel="stylesheet" href="http://prismjs.com/themes/prism.css"/>
<script type="text/javascript" src="http://prismjs.com/prism.js">
• Finally Click on save
Tips:Make certain y'all backup your template earlier y'all ship out the physical care for given above.
Tips : The links inward the script as well as link tag is exclusively for exhibit of the code, if y'all desire to role dissimilar topic on your hosted website thus y'all tin download the version of your pick on PrismJS Download page, upload it to your hosting service as well as supersede the links (prismjs.com/theme/prism.css as well as prismjs.com/prism.js) alongside your hosted file's links .
How To Display Code on Your Blogger Using PrismJs
The next instance is for displaying HTML codes inward your pages, to define whatsoever languages y'all bring to edit language-xxx
<pre class='language-markup'> <code> // Your HTML Code hither </code> </pre>
Tip: You tin add together the cast for a linguistic communication to whatsoever rear chemical factor as well as the children elements volition inherit the defined language. It is real useful when y'all simply desire to display codes of the same linguistic communication inward a page also 30 refer to the linguistic communication y'all are writing on eg php.
How To Implement Different Languages
To define languages y'all simply bring to alter the language-xxxx inward the cast y'all tin uncovering inward <pre> as well as <code> tags.
For HTML nosotros volition role this tags to wind the display codes
<pre class='language-markup'> <code> // Your HTML Code hither </code> </pre>
language-markup is used for HTML markups. You may role this for XML codes too.
CSS volition endure wrapped into this tags
<pre class='language-css'> <code> // Your CSS Code hither </code> </pre>
JavaScript tin endure wrapped into this
<pre class='language-javascript'> <code> // Your JS Code hither </pre> </code>
JQuery tin also endure displayed alongside this.
Want to larn to a greater extent than than banking concern check out the PrismJS homepage
Read also: How to Use Google Prettify Syntax Highlighter With Blogger
How To Implement Different Themes
The corking affair close PrismJS syntax highlighter is that y'all tin brand the code blend alongside your site's overall topic past times using dissimilar themes provided past times PrismJS. There are the next themes available past times default for it : default, dark, funky, okaidia, twilight, coy as well as solarized light
With a unmarried add-on of a CSS file y'all tin alter the topic for all PrismJS syntax highlighter instances on your blog.
In the starting fourth dimension footstep nosotros added the default theme,
<link rel="stylesheet" href="http://prismjs.com/themes/prism.css"/>
<script type='text/javascript' src="http://prismjs.com/prism.js"></script>
The http://prismjs.com/themes/prism.css inward the starting fourth dimension business of code sets the topic to default, spell the next sets it to its corresponding theme.
Dark
<link rel="stylesheet" href="http://prismjs.com/themes/prism-dark.css"/>
Funky
<link rel="stylesheet" href="http://prismjs.com/themes/prism-funky.css"/>
Okaidia
<link rel="stylesheet" href="http://prismjs.com/themes/prism-okaidia.css"/>
Twilight
<link rel="stylesheet" href="http://prismjs.com/themes/prism-twilight.css"/>
Coy
<link rel="stylesheet" href="http://prismjs.com/themes/prism-coy.css"/>
Solarized Light
<link rel="stylesheet" href="http://prismjs.com/themes/prism-solarizedlight.css"/>
