SyntaxHighlighter 3.0.83 on Blogger splits my source code
-
18-04-2021 - |
Вопрос
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
Решение
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.
Другие советы
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 = 'http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf';
SyntaxHighlighter.all();
</script>
<!--SYNTAX HIGHLIGHTER ENDS-->
</head>