SyntaxHighlighter not showing toolbar

Question

I am using the latest SyntaxHighlighter within my app and for some reason the toolbars do not show in IE, Firefox or Chrome. The code highlights without issue, but I want to have toolbars. What makes things worse is that the toolbar demo on the official website is not working either.

Am I missing something obvious? Below are the code nuggets.

<script src="Scripts/syntaxhighlighter/scripts/shBrushCSharp.js" type="text/javascript"></script>
<link type="text/css" rel="stylesheet" href="Scripts/syntaxhighlighter/styles/shCoreDefault.css" />
<script type="text/javascript">
    // Highlight code
    SyntaxHighlighter.all();
</script>

<pre class="brush: csharp; ruler: true; title: 'Test'; toolbar: true;">
public static bool HelloWorld()
{
    // Return
    return false;
}
</pre>

Lind

Answer 1

I've been trying to figure this one out myself. I won't claim to be 100% correct here, but from what I can tell, this is the answer:

1. Toolbar was changed in update from version 2 to version 3.
2. Toolbar no longer includes the icons and whatnot.
3. The default toolbar is now the simple '?'.

This pretty much sucks, if it's true. The pop-up toolbar w/ icons is one of the things that made me choose SH over the other options.

This is what I'm guessing comparing the included CSS files in the latest package to the CSS available on sites that have a version with the "proper" toolbar enabled.

Here's a link to one I was snooping in: ramymostafa.com

Usurious

In addition, smart-tabs: false doesn't work even in the office demo, 'smart-tabs' demo. Any suggests to fix it? – Allopath

@SparkandShine Not really. I use Google Prettify and/or Highlight.js these days. – Usurious

how making them compatible for different format, <pre class="brush: language">...</pre> in SyntaxHighligter and <pre class="language">...</pre> in Google Prettify? – Allopath

Prettify doesn't require the language to be specified ahead of time. It will guess based on heuristics, as does Highlight.js. – Usurious

Answer 2

While I would like the toolbar myself, it seems that one of the toolbars features - copy & paste - have been included without the need for a toolbar item:

If you double click anywhere on the code, the entire code view is replaces with a pre-selected view from which users can copy with a simple Ctrl/Cmd-C. Clicking anywhere else returns the view to the original state. http://alexgorbatchev.com/SyntaxHighlighter/whatsnew.html#copytoclipboard

I would still like the pop out feature, but less buttons is a good thing, I guess?

Lyrism

Normally, I'd agree, but my primary use case (embedding it in TiddlyWiki because 1.x and 2.x are LGPL rather than MIT-licensed) doesn't get along with that because TiddlyWiki has its own double-click handler. (And it's a hassle to manually select just the code snippet after double-clicking takes me to TW's edit view) ...it's also not as obvious to visiting users in situations other than my private TiddlyWiki. – Osvaldooswal

Answer 3

the same problem here. looks like there is no toolbar in v3.

i use v2 again: http://alexgorbatchev.com/SyntaxHighlighter/download/download.php?sh_2.1.382

if you copy the css and js around, don't forget to include the images in folder styles

Abutment

Should I load XRegExp.js for the new version? – Allopath

Answer 4

The toolbar can be easily be showing simply go to the plugin configuration, on the Highlighter Version set to VERSION 2X. This way the toolbar will be shown again!

Elamite

Answer 5

I confirm that in Version 3 the toolbar does not show.

Boatsman