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:

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

Thanks

Answer 1

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.