SyntaxHighlighter 3.0.83 on Blogger splits my source code

StackOverflow https://stackoverflow.com/questions/8952315

  •  18-04-2021
  •  | 
  •  

Question

I'm trying to use SyntaxHighlighter 3.0.83 on Blogger in order to highlight some simple java code but my single java line is split in many chunks. Here's what I did to set it up:

Blogger: Design | Template | Edit HTML

Added these lines right before </head>:

<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/shThemeEmacs.css' rel='stylesheet' type='text/css'/>

Then, added those lines right before the end of </body>:

<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'/>
<script language='javascript' type='text/javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.defaults.toolbar = false;
SyntaxHighlighter.all();
</script>

Then my post is:

<pre class="brush:java">MyJFrame.this.processWindowEvent(new WindowEvent(MyJFrame.this, WindowEvent.WINDOW_CLOSED));
</pre>

and what I get is: enter image description here

How come my line is split using every word separator apparently?

Thanks

Was it helpful?

Solution

I finally got it:

I previously added CSS customisations to Blogger for the <code> HTML tag like this:

code {
    border: 1px solid #ccc;
    background-color: #f6f6f6;
    font: 0.8em 'Courier New', Courier, Fixed;
    border-spacing: 0;
    padding: 0.3em;
    display: block;
}

and the culprit is display : block;, which perturbates SyntaxHighlighter.

Replacing code {...} with pre code {...} does the trick for me.

OTHER TIPS

I've tried it on my blog and it works. You should just add all those tags, right before </head> tag. This is what I've for my blog:

<!--SYNTAX HIGHLIGHTER BEGINS-->
    <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 src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'/>
    <script language='javascript'>
    SyntaxHighlighter.config.bloggerMode = true;
    SyntaxHighlighter.config.clipboardSwf = &#39;http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf&#39;;
    SyntaxHighlighter.all();
    </script>
    <!--SYNTAX HIGHLIGHTER ENDS-->

</head>

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top