Archived topic
Help with syntax highlighter css code
5 replies · Started by Halil on August 13, 2018
May I request for a little help with css coding?
Below page there are 2 code blocks, the upper one is done with standard < pre > < code >.
Other one is done with syntax highlighter plugin, I am able to change some text color, line number colors but couldnt find how to change background color like the one above and put some padding below and top. Also I couldnt change the line color which is green.
could u pls help me with css?
Hi there,
Their code is a bit messy to look at for sure.
Have you checked in with the plugin author/support?
He is not responding for a long time but the plugin is so popular on the contrary.
I am still trying to find css for changing green vertical line, changing the background of the whole code block and adding some margin at top & bottom.
Try this:
body .syntaxhighlighter .gutter .line {
border-right: 3px solid #000 !important;
}
body .syntaxhighlighter .line.alt2 {
background-color: #000 !important;
}
body .syntaxhighlighter {
margin: 1em 0 1em 0 !important
}The plugin uses important on everything which isn't very good.
If you right click on the element and use browser inspect you should be able to find all the CSS. Just takes some time as it's not very well coded.
Hope this helps!
the code u provided changing the background color of line, not the background color of whole code block. I am trying to make background color like the one above.
sorry for bothering you, u r right it's hard to find, it's harder for rookies like me.
appreciate your help.
What if you add this too?
body .syntaxhighlighter .line.alt1 {
background-color: #000 !important;
}Here is a quick video on how to find these things:
https://www.screencast.com/t/QW349QvCwsp0
Sorry but we have to limit how much support we provide for other plugins.
Thanks for your understanding :)
