CODEWITHSUNDEEP
javascripthtmlbloggerblogs
PArikshit KAmat
PArikshit KAmat

Reputation: 39

How to add code snippets in blogger posts?

Hey guys I write posts occasionally on blogger but today I stuck with one problem which is related to code snippet. I want to add html and JavaScript code in blogger but not find anything useful to do this task Then I used copy code from visual Studio then paste to blogger directly but sometimes code gets mangled and I want to deliver clear code to my reader.

I search a lot on google at last I find hilite website but this website is not working because it will not change special character like "<" And ">" To "&lt". I use hilite then copy the code and paste to my blogger post then function of this code will execute rather than showing code to posts So anybody here have idea how to do this task.

Thanks in advance!

Upvotes: 0

Views: 2198

Answers (2)

Wernayasa
Wernayasa

Reputation: 41

I have same problem back then, the solution is simple.

<script> /*<![CDATA[*/
    Your javascript code
/*]]>*/ </script>

Upvotes: 0

PArikshit KAmat
PArikshit KAmat

Reputation: 39

First of all this is best rated question on internet because as you know there is no plugins and tools available on blogger to do this task but parallelly as we compare this thing to WordPress then there are tons of plugins are available to complete this task.

So Coming to main point how to add code snippets in blogger posts then your answer is just use third party syntax highlighting library from Highlightjs.

Highlightjs is a syntax highlightning library which use JavaScript and CSS code to high light code chunks in blogger. Also this platform supports 95 styles and 189 languages but this data is not static probably this data changes to new but from writing this post these are current data for sure if you want to know more about styles and languages then click on this .

Use this library to your layout html:—

<!-- below is used to highlight code in blogger-->
    
<link href='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/github.min.css' rel='stylesheet'/>

<script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/highlight.min.js'/>
<script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/languages/r.min.js'/>

<script>hljs.initHighlightingOnLoad();</script>

Now use pre tag in your blogger anywhere you want code snippet as depending upon your need.Use this below tag to blogger post where you want code box.

<pre><code class="html">
/* Paste your code here */
</code></pre>

If you want step wise solution with example then follow this blogger post. gforgeekspot

Hope this helps! Cheers

Upvotes: 3

Related Questions