How to add scripts to blog

bloggerjavascriptsyntax highlighting

I want to add some source code in my blog in Blogger, so I did a search. In the website I found a similar question and in the solutions I found a solution:

  1. Copy the following code:

    <link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'></script>
<script language='javascript'>
    SyntaxHighlighter.config.bloggerMode = true;
    SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf';
    SyntaxHighlighter.all();
</script>
  2. Paste it into your Blogger template just above the </head> tag.
  3. Save the template.
  4. Then you can start creating code blocks in your existing or new Blog entries.
  5. There are two ways to add a code block using SyntaxHighlighter.

Method 1: Using the script tag

<script type="syntaxhighlighter" class="brush: csharp">
<![CDATA[ //Simple Code ]]></script>

Method 2: Using the pre tag

<pre class="brush: csharp">//Simple Code</pre>

The problem is that the first method doesn't work and it doesn't display anything, and the second method displays the source code but without the syntax highlighting.

I think there is something which doesn't allow scripts to work in my blog.

So could you please help me to solve this problem?

Best Answer

I tried Method 2, using my Blogger account. I have a fairly complicated template, so I added the scripts just below the title tags in the HTML header.

It worked without any problems for me.

Perhaps you have a setting in your browser that prevents JavaScript from running? I viewed my Blogger post in FireFox.

Keep in mind that each time you load your webpage, it will need to access the developer's website (http://alexgorbatchev.com/SyntaxHighlighter/). Instead of hard-linking to his URL, you should fork his scripts from GitHub.

Related Topic