Prism Syntax Highlighter – Display Language by default

While creating this website I had a real pleasure researching different Syntax Highlighters that are currently available. I stopped my search when I found a beautiful and versatile Prism Syntax Highlighter. It’s easy to install and use and has lots of features you would want to have in your syntax highlighter like options for different languages, line numbers, and especially language name display.

Originally code snippet language is only displayed when it’s mouse-over-ed. I personally wanted the language to always show (without it being explicitly mouseover-ed) so here are a few changes I made to prism.css file to have the language name show by default.

Change 1: Changing opacity to 1 will make the language name visible

pre.code-toolbar > .toolbar {
	position: absolute;
	top: .3em;
	right: .2em;
	transition: opacity 0.3s ease-in-out;
	/*opacity: 0;*/
	opacity: 1;
	/*changing opacity to 1 will make the language name visible*/
}

Change 2: Commenting out the styles for box-shadow and border radius will remover the button like appearance of the language name label

pre.code-toolbar > .toolbar a,
pre.code-toolbar > .toolbar button,
pre.code-toolbar > .toolbar span {
	color: #bbb;
	font-size: .8em;
	padding: 0 .5em;
	background: #f5f2f0;
	background: rgba(224, 224, 224, 0.2);
	/*box-shadow: 0 2px 0 0 rgba(0,0,0,0.2);
	border-radius: .5em;*/
	/*commenting out the styles for box-shadow and border radius 
	will remover the button like appearance of the language name label*/
}

Prism Language Display Before & After

Prism Language Display Before
Prism Language Display After

There is nothing wrong with the label being hidden and I am not against the button like appearance just for my website style I wanted a simpler look. What do you think? Did you find this useful? Leave the comment below.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.