Adding HighlightJs to your blog is one of the easiest yet most effective thing you can do to make your code readable as well as presentable to your viewers.
1. Go to Blogger settings. Select the blog you want to add highlightJs to
2. Click on Theme link on the left Nav.
3. Under Theme view, click on Edit HTML.
4. In the Edit HTML view, find the </head> element. We need to add references to css as well as respective JS files just above the closing </head>
To add HighlightJs to your blog theme on Blogger, you have a couple of options:
- Host HighlightJs file somewhere access to blogger platform.
- Reference css and js links to CDN
I am going to show you how easy it is to add CDN link to your blog.
2. Click on Theme link on the left Nav.
3. Under Theme view, click on Edit HTML.
4. In the Edit HTML view, find the </head> element. We need to add references to css as well as respective JS files just above the closing </head>
5. Add the following script block to ensure highlighter gets loaded appropriately
<script>hljs.initHighlightingOnLoad();</script>
Here are the CDN references highlighted above:
<link href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.8/styles/default.min.css" rel="stylesheet"></link>
<link href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.8/styles/solarized-dark.min.css" rel="stylesheet"></link>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.8/highlight.min.js">
<script src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.8/languages/css.min.js'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.8/languages/cs.min.js'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.8/languages/javascript.min.js'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.8/languages/json.min.js'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.8/languages/powershell.min.js'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.8/languages/python.min.js'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.8/languages/vbscript.min.js'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.8/languages/javascript.min.js'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.8/languages/json.min.js'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.8/languages/powershell.min.js'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.8/languages/python.min.js'/>
No comments:
Post a Comment