How do I set up syntax highlighting in Blogger?

Question

How do I set up syntax highlighting in Blogger?

How do I customize syntax highlighting in the new Blogger interface? I tried many options, but nothing helped. Please give any suggestions.

+62

syntax-highlighting blogger syntaxhighlighter

Anil Apr 26 2018-12-12T00:

source share

3 answers

Mahesh Meniya · Answer 1 · 2012-06-01 10:44

1. First back up your Blogger template.
2. After that, open your blogging template (in HTML editing mode) and copy all the css specified in this link before the </b:skin>
3. Paste the following code before the </head>

 <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shCore.js' type='text/javascript'></script> <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCpp.js' type='text/javascript'></script> <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCSharp.js' type='text/javascript'></script> <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCss.js' type='text/javascript'></script> <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushDelphi.js' type='text/javascript'></script> <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJava.js' type='text/javascript'></script> <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJScript.js' type='text/javascript'></script> <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPhp.js' type='text/javascript'></script> <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPython.js' type='text/javascript'></script> <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushRuby.js' type='text/javascript'></script> <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushSql.js' type='text/javascript'></script> <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushVb.js' type='text/javascript'></script> <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushXml.js' type='text/javascript'></script>

4. Paste the following code before the </body> .

 <script language='javascript'> dp.SyntaxHighlighter.BloggerMode(); dp.SyntaxHighlighter.HighlightAll('code'); </script>

5. Save the Blogger template.
6. Now the syntax highlighting is ready for use, you can use it with the <pre></pre> .

 <pre name="code"> ...Your html-escaped code goes here... </pre> <pre name="code" class="php"> echo "I like PHP"; </pre>

7. You can avoid your code here .
8. Here is a list of the supported language for the <class> attribute.

John Erck · Answer 2 · 2012-04-29 17:52

Checkout http://oneqonea.blogspot.com/2012/04/how-do-i-add-syntax-highlighting-to-my.html

This is a very simple “SyntaxHighlighter for Blogger” tutorial with screenshots and more.

You need to be up and running in just a few minutes.

In addition, the tutorial is built around the “new interface” you are talking about.

Hope this helps. Happy coding.

grkvlt · Answer 3 · 2013-03-10 22:40

Depending on your template, SyntaxHighlighter JavaScript code may run before content is loaded. In this case, changing the code to run after a short timeout should fix the problem. Try this in the <head> your HTML template:

  <script type = "text / javascript">
 window.setTimeout (function () {
     SyntaxHighlighter.config.bloggerMode = true;
     SyntaxHighlighter.all ();
 }, 10);
 </script>

You can add additional default settings before calling ScriptHighlighter.all() .

If you want to customize the appearance of the SyntaxHighlighter code, add CSS:

  .syntaxhighlighter code {
   font-family: Consolas! important;
   font-size: 10px! important;
 }

!important you must override SyntaxHighlighter theme definitions.

How do I set up syntax highlighting in Blogger?

More articles: