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!

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.

Answer 2

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>

Answer 3

For version 3.0.x

SyntaxHighlighter.defaults['toolbar'] = false;

Answer 4

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.

Answer 5

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

Answer 6

SyntaxHighlighter.defaults.toolbar = false;

Answer 7

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;
}