SyntaxHighlighter | SyntaxHighlighter Basics | JavaScript files by language and CSS files for themes

Tags:

To use SyntaxHighlighter, you must load several required files in the HTML file where you write the source code. This page explains how to include those files.

Loading JavaScript files

For JavaScript files, load the required shCore.js file and the JavaScript file for the programming language you use. Refer to the following table to see which file should be loaded for each language.

Brush name	Brush aliases	File name
ActionScript3	as3, actionscript3	shBrushAS3.js
Bash/shell	bash, shell	shBrushBash.js
ColdFusion	cf, coldfusion	shBrushColdFusion.js
C#	csharp, csharp	shBrushCSharp.js
C++	cpp, c	shBrushCpp.js
CSS	css	shBrushCss.js
Delphi	delphi, pas, pascal	shBrushDelphi.js
Diff	diff, patch	shBrushDiff.js
Erlang	erl, erlang	shBrushErlang.js
Groovy	groovy	shBrushGroovy.js
JavaScript	js, jscript, javascript	shBrushJScript.js
Java	java	shBrushJava.js
JavaFX	jfx, javafx	shBrushJavaFX.js
Perl	perl, pl	shBrushPerl.js
PHP	php	shBrushPhp.js
Plain	Text plain, text	shBrushPlain.js
PowerShell	ps, powershell	shBrushPowerShell.js
Python	py, python	shBrushPython.js
Ruby	rails, ror, ruby	shBrushRuby.js
Scala	scala	shBrushScala.js
SQL	sql	shBrushSql.js
Visual Basic	vb, vbnet	shBrushVb.js
XML	xml, xhtml, xslt, html, xhtml	shBrushXml.js

For example, when writing PHP source code, load shBrushPhp.js. When writing HTML source code, load shBrushXml.js. The actual markup looks like this:

<script src="../scripts/shCore.js"></script>
<script src="../scripts/shBrushPhp.js"></script>

When writing source code in multiple languages in the same HTML file, load the required core file and as many JavaScript files as necessary. The following example is for writing HTML source code and CSS source code.

<script src="../scripts/shCore.js"></script>
<script src="../scripts/shBrushCss.js"></script>
<script src="../scripts/shBrushXml.js"></script>

Upload the files you load to the web server you use directly, or use them through a CDN.

Loading CSS files

For CSS files, load the required shCore.css file and the CSS file for the theme you use. Looking at the files included in the downloaded script directory, SyntaxHighlighter provides eight themes: Default, Django, Eclipse, Emacs, FadeToGrey, MDUltra, Midnight, and RDark.

Theme name	File name	Includes core
Default	shThemeDefault.css	shCoreDefault.css
Django	shThemeDjango.css	shCoreDjango.css
Eclipse	shThemeEclipse.css	shCoreEclipse.css
Emacs	shThemeEmacs.css	shCoreEmacs.css
FadeToGrey	shThemeFadeToGrey.css	shCoreFadeToGrey.css
MDUltra	shThemeMDUltra.css	shCoreMDUltra.css
Midnight	shThemeMidnight.css	shCoreMidnight.css
RDark	shThemeRDark.css	shCoreeRDark.css

There are two types of CSS files: shCoreXXX.css and shThemeXXX.css. The shCoreXXX.css file combines the required shCore.css and the corresponding shThemeXXX.css. For example, to apply the Default theme, either load both shCore.css and shThemeDefault.css, or load only shCoreDefault.css.

Unless you need to switch between multiple themes, load one shCoreXXX.css file. The actual markup looks like this:

<link rel="stylesheet" href="../css/shCoreDefault.css"/>

As with JavaScript files, upload the CSS files to the web server you use directly, or use them through a CDN.

Running SyntaxHighlighter.all()

After loading the required files, run SyntaxHighlighter.all() once.

<script type="text/javascript">
  SyntaxHighlighter.all();
</script>

In the HTML sample code included with the downloaded files, this is placed inside <head></head>.

Summary of the required markup

Putting together the JavaScript files, CSS file, and SyntaxHighlighter.all() call, the markup looks like this:

<html>
<head>
  <script src="../scripts/shCore.js"></script>
  <script src="../scripts/shBrushPhp.js"></script>
  <link rel="stylesheet" href="../css/shCoreDefault.css" type="text/css" />
  <script type="text/javascript">
    SyntaxHighlighter.all();
  </script>
</head>
<body>
...
</body>
</html>

The setup is now complete. Change each file path to match the location where you uploaded the files.