SyntaxHighlighter 3.0.83

Fork Me On GitHub
whats new?
SyntaxHighlighter is an open source Java Script client side code syntax highlighter.
donate download installation autoloader configuration @syntaxhighlight

CSS Example

      .syntaxhighlighter,
      .syntaxhighlighter .bold,
      .syntaxhighlighter .italic,
      .syntaxhighlighter .line .number,
      .syntaxhighlighter.nogutter .line .number,
      .syntaxhighlighter .line .content,
      .syntaxhighlighter .line .content code,
      .syntaxhighlighter .line .content .block,
      .syntaxhighlighter .line .content .spaces,
      .syntaxhighlighter.nogutter .line .content,
      .syntaxhighlighter .bar,
      .syntaxhighlighter.collapsed .bar,
      .syntaxhighlighter.nogutter .bar,
      .syntaxhighlighter .ruler,
      .syntaxhighlighter.collapsed .lines,
      .syntaxhighlighter.collapsed .ruler,
      .syntaxhighlighter.printing,
      .syntaxhighlighter.printing .tools,
      .syntaxhighlighter.printing li,
      .syntaxhighlighter .toolbar,
      .syntaxhighlighter.nogutter .toolbar,
      .syntaxhighlighter.collapsed .toolbar,
      .syntaxhighlighter .toolbar a,
      .syntaxhighlighter .toolbar a:hover
      {
      	margin: 0;
      	padding: 0;
      	border: 0;
      	outline: 0;
      	background: none;
      	text-align: left;
      	float: none;
      	vertical-align: baseline;
      	position: static;
      	left: auto;
      	top: auto;
      	right: auto;
      	bottom: auto;
      	height: auto;
      	width: auto;
      	line-height: normal;
      	font-family: "Consolas", "Monaco", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace;
      	font-weight: normal;
      	font-style: normal;
      	font-size: 100%;
      }
      
      .syntaxhighlighter
      {
      	font-size: 16px;
      	width: 99%;
      	overflow: auto;
      	margin: 18px 0 18px 0 !important;
      	padding-top: 1px; /* adds a little border on top when controls are hidden */
      }
      
      .syntaxhighlighter .bold {
      	font-weight: bold;
      }
      
      .syntaxhighlighter .italic {
      	font-style: italic;
      }
      
      .syntaxhighlighter .line .number
      {
      	float: left; 
      	width: 45px; 
      	padding-right: 5px;
      	text-align: right;
      	display: block;
      }
      
      /* Disable numbers when no gutter option is set */
      .syntaxhighlighter.nogutter .line .number
      {
      	display: none;
      }
      
      .syntaxhighlighter .line .content
      {
      	margin-left: 50px; 
      	padding-left: 4px;
      	display: block;
      }
      
      .syntaxhighlighter .line .content .block
      {
      	display: block;
      	padding-left: 18px;
      	text-indent: -18px;
      }
      
      .syntaxhighlighter .line .content .spaces
      {
      	display: none;
      }
      
      /* Disable border and margin on the lines when no gutter option is set */
      .syntaxhighlighter.nogutter .line .content
      {
      	margin-left: 0; 
      	border-left: none;
      }
      
      .syntaxhighlighter .bar
      {
      	padding-left: 50px;
      }
      
      .syntaxhighlighter.collapsed .bar,
      .syntaxhighlighter.nogutter .bar
      {
      	padding-left: 0px;
      }
      
      .syntaxhighlighter .ruler
      {
      	padding-left: 4px;
      	overflow: hidden;
      	padding-bottom: 2px;
      }
      
      /* Adjust some properties when collapsed */
      
      .syntaxhighlighter.collapsed .lines,
      .syntaxhighlighter.collapsed .ruler
      {
      	display: none;
      }
      
      /* Additional modifications when in print-view */
      
      .syntaxhighlighter.printing
      {
      	border: none !important;
      }
      
      .syntaxhighlighter.printing .bar
      {
      	display: none !important;
      }
      
      /* Styles for the tools */
      
      .syntaxhighlighter .toolbar
      {
      	font-size: 80%;
      	font-family: Geneva, Verdana, Arial, Helvetica, sans-serif;
      	padding: 1px 5px 5px 5px;
      }
      
      .syntaxhighlighter.nogutter .toolbar
      {
      	border-left: 0;
      }
      
      .syntaxhighlighter.collapsed .toolbar
      {
      	border-bottom: 0;
      }
      
      .syntaxhighlighter .toolbar a
      {
      	text-decoration: none;
      	margin-right: 10px;
      }
      
      .syntaxhighlighter .toolbar a:hover
      {
      	text-decoration: underline;
      	margin-right: 10px;
      }
      
Brush nameBrush aliasesFile name
ActionScript3as3, actionscript3shBrushAS3.js
Bash/shellbash, shellshBrushBash.js
ColdFusioncf, coldfusionshBrushColdFusion.js
C#c-sharp, csharpshBrushCSharp.js
C++cpp, cshBrushCpp.js
CSScssshBrushCss.js
Delphidelphi, pas, pascalshBrushDelphi.js
Diffdiff, patchshBrushDiff.js
Erlangerl, erlangshBrushErlang.js
GroovygroovyshBrushGroovy.js
JavaScriptjs, jscript, javascriptshBrushJScript.js
JavajavashBrushJava.js
JavaFXjfx, javafxshBrushJavaFX.js
Perlperl, plshBrushPerl.js
PHPphpshBrushPhp.js
Plain Textplain, textshBrushPlain.js
PowerShellps, powershellshBrushPowerShell.js
Pythonpy, pythonshBrushPython.js
Rubyrails, ror, rubyshBrushRuby.js
ScalascalashBrushScala.js
SQLsqlshBrushSql.js
Visual Basicvb, vbnetshBrushVb.js
XMLxml, xhtml, xslt, html, xhtmlshBrushXml.js