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!

score 46 · Answer 1 · edited Oct 06 '13 at 17:09

46

SyntaxHighlighter.defaults.toolbar = false;

edited Oct 06 '13 at 17:09

Ram

143,282
16
168
197

answered Jun 22 '12 at 14:30

Fred Yang

2,521
3
21
29

4

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: http://alexgorbatchev.com/SyntaxHighlighter/manual/configuration/ – Subfuzion Oct 29 '12 at 07:52
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! – Eric Bishard Jun 23 '15 at 01:10

score 10 · Accepted Answer · answered Oct 31 '11 at 06:10

10

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.

answered Oct 31 '11 at 06:10

Kiran

20,167
11
67
99

The most appropriate method is to use the answer provided by Fred Yang. This can be set in the plugin settings page – scubasteve Oct 19 '13 at 00:15

score 3 · Answer 3 · answered Dec 01 '13 at 19:20

3

For version 3.0.x

SyntaxHighlighter.defaults['toolbar'] = false;

answered Dec 01 '13 at 19:20

Dmitry Trifonov

1,079
11
13

score 1 · Answer 4 · answered Mar 11 '14 at 23:25

1

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

answered Mar 11 '14 at 23:25

David Kerwick

528
1
5
12

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. – lawlist Apr 18 '14 at 07:57

score 1 · Answer 5 · edited Jun 19 '16 at 11:35

1

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.

edited Jun 19 '16 at 11:35

Tim Malone

3,364
5
37
50

answered Jun 19 '16 at 09:13

Pramod Kishore

307
2
8

score 0 · Answer 6 · answered Nov 17 '14 at 14:49

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>

Om Sao · Answer 7 · 2019-01-18T01:26:35.493

The question mark toolbar can be removed in 2 ways;

CSS method: In file shThemeDefault.css add property for display: none; inside, selector: '.syntaxhighlighter .toolbar '
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

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

7 Answers7