SyntaxHighlighter | SyntaxHighlighter Basics | Writing source code (pre and script elements)

Tags:

This page explains how to write source code on a web page or blog post so that it can be displayed easily with SyntaxHighlighter. You can use either the pre element or the script element.

Using the pre element

First, here is how to use the pre element. The format is as follows:

<pre class="brush:language-name">
...
Write source code
...
</pre>

Write brush:language-name in the class name of the pre element. For the language name, use a value from the Brush aliases column in the language table on the previous page. If there are multiple Brush aliases, use one of them. For example, for JavaScript, write it as follows:

<pre class="brush:js">
...
Write source code
...
</pre>

Here are a few examples for other languages:

Ruby  : <pre class="brush:ruby"></pre>
PHP   : <pre class="brush:php"></pre>
Java  : <pre class="brush:java"></pre>
HTML  : <pre class="brush:html"></pre>

There are other available options, which are explained on another page.

Notes

When using the pre element, every < written inside the element must be converted to <. You do not need to convert > to > or & to &.

Practice

Now try it in practice. Write Java source code in an HTML page as follows. This example uses the Default theme.

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shCoreDefault.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shCore.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushJava.min.js"></script>
  <script type="text/javascript">
    SyntaxHighlighter.all();
  </script>
</head>
<body>
  <h1>SyntaxHighlighter</h1>
  
<pre class="brush:java">
/**
 * The HelloWorldApp class implements an application that
 * simply prints "Hello World!" to standard output.
 */
public class HelloWorld {
    public static void main(String[] args) {
        System.out.println("Hello World!");
    }
}
</pre>
  
</body>
</html>

Run code

When you run the code, you can confirm that the Java source code is displayed by SyntaxHighlighter.

Using the script element

Next, here is how to use the script element. The format is as follows:

<script type="syntaxhighlighter" class="brush:language-name">
<![CDATA[
...
Write source code
...
]]>
</script>

Specify syntaxhighlighter for the type attribute of the script element. As with the pre element, write brush:language-name in the class of the script element. For the language name, use a value from the Brush aliases column in the language table on the previous page. For example, for JavaScript, write it as follows:

<script type="syntaxhighlighter" class="brush:js">
<![CDATA[
...
Write source code
...
]]>
</script>

As with the pre element, there are available options that can be specified. They are explained on another page.

Notes

When using the script element, you do not need to convert < to < as you do with the pre element. However, if you write ]]>, convert it to ]]>, and if you write </script>, convert it to </script>.

When using a blog service, script elements may be ignored or cause errors even if you write them. In that case, use the pre element.

Practice

Now try it in practice. Write Java source code in an HTML page as follows. This example uses the Default theme.

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shCoreDefault.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shCore.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushJava.min.js"></script>
  <script type="text/javascript">
    SyntaxHighlighter.all();
  </script>
</head>
<body>
  <h1>SyntaxHighlighter</h1>
  
<script type="syntaxhighlighter" class="brush:java">
<![CDATA[
/**
 * The HelloWorldApp class implements an application that
 * simply prints "Hello World!" to standard output.
 */
public class HelloWorld {
    public static void main(String[] args) {
        System.out.println("Hello World!");
    }
}
]]>
</script>
  
</body>
</html>

Run code

When you run the code, you can confirm that the Java source code is displayed by SyntaxHighlighter.