SyntaxHighlighter: How to remove the lime-colored question mark or at least change its color?

Question

Well, the green question mark does not go with my website color scheme. How do I change/remove it? You can see it here: http://alexgorbatchev.com/SyntaxHighlighter/manual/installation.html

Thanks!

Atmospheric

Answer 1

In your shThemeDefault.css you can find the following code:

.syntaxhighlighter .toolbar {
    background: none repeat scroll 0 0 #6CE26C !important;
    border: medium none !important;
    color: white !important;
}

Above CSS difines to display green color '?' mark in you website.So, if you want to hide that then specify display : none in above code.If you need to change the background color you can specify you desired color in background property.

Huskey

The most appropriate method is to use the answer provided by Fred Yang. This can be set in the plugin settings page – Stardom

Answer 2

SyntaxHighlighter.defaults.toolbar = false;

Embankment

I'd say this is answer is preferable to the accepted answer's recommendation to modify the theme's css. If you switch themes, you'll have to modify each one. The reference is here: alexgorbatchev.com/SyntaxHighlighter/manual/configuration – Sirois

A lot of us are using this inside Wordpress and the easiest way is to go into the setting and uncheck the Show Toolbar option. Which is the same as this configuration. Thanks Fred! – Lovmilla

Answer 3

For version 3.0.x

SyntaxHighlighter.defaults['toolbar'] = false;

Rabinowitz

Answer 4

What I found with the answer given is that if you try to use

<pre class="brush: plain; collapse: true">
    test
</pre

It won't display the "expand source" as the whole toolbar is hidden

I believe this css targets the green box and the question mark only, leaving the toolbar available for other functions

.syntaxhighlighter div.toolbar span a.toolbar_item{
   display: none !important;
} 

.syntaxhighlighter .toolbar {
  background: none !important;
}

Felicidadfelicie

Based upon the various answers, I opted to modify shCore.css by adding display : none !important; to .syntaxhighlighter .toolbar. This avoids the necessity of including SyntaxHighlighter.defaults['toolbar'] = false; in the webpage itself. I am assuming that the shCore.css affects all the brushes. It is unclear whether this is what @David Kerwick intended. – Notch

Answer 5

If you are facing this issue for your Google Blogger, it means you have already added SyntaxHighlighter libraries in your template.

So go to Template in your Blogger. Then click on Edit HTML and search for the line:

SyntaxHighlighter.all();

Add the below line before that line:

SyntaxHighlighter.defaults['toolbar'] = false; 

This will disable your lime-colored question mark in Blogger.

Dressage

Answer 6

Use Syntax Highlighter's Configuration API to disable the Toolbar, the Green Question Mark box when it doesn't display properly.

After your Brush Script References, add this ...

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

Beta

Answer 7

The question mark toolbar can be removed in 2 ways;

1. CSS method: In file shThemeDefault.css add property for display: none; inside, selector: '.syntaxhighlighter .toolbar '

2. JavaScript statement Method Just before the closing of tag, alongwith statement SyntaxHighlighter.all(); include this statement SyntaxHighlighter.defaults.toolbar = false; or SyntaxHighlighter.defaults['toolbar'] = false;

Detailed explaination on: use-syntax-highlighter-in-website-blog-html

Myasthenia