5

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>

5 Answers 5

8

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

4
  • In addition, smart-tabs: false doesn't work even in the office demo, 'smart-tabs' demo. Any suggests to fix it? Jan 19, 2016 at 17:13
  • @SparkandShine Not really. I use Google Prettify and/or Highlight.js these days.
    – Tieson T.
    Jan 19, 2016 at 20:34
  • how making them compatible for different format, <pre class="brush: language">...</pre> in SyntaxHighligter and <pre class="language">...</pre> in Google Prettify? Jan 19, 2016 at 20:51
  • 1
    Prettify doesn't require the language to be specified ahead of time. It will guess based on heuristics, as does Highlight.js.
    – Tieson T.
    Jan 19, 2016 at 23:17
3

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?

1
  • 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.
    – ssokolow
    Jul 5, 2011 at 1:38
2

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

1
  • Should I load XRegExp.js for the new version? Jan 19, 2016 at 17:47
2

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!

1

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.