How to Embed Code With Line Numbers in WordPress
Syntax highlighters add colored text and line numbers to code snippets embedded in Web pages. WordPress offers many free plugins in its repository that highlight and line-number the code you embed with only a class name added to a pair of "<pre>" tags. Since a large number of plugins use the same jQuery script as their base, the same instructions apply to most of them. After installing the plugin, however, you should check its home page for any specific instructions, extra features or hints.
Other People Are Reading
Instructions
-
-
1
Log in to WordPress and go to "Plugins." Select "Add New" from the "Plugins" submenu and type "syntax highlighter" in the search box. Choose a plugin, click on its name and install it to your blog. Activate the plugin after it finishes installing.
-
2
Go to "Posts" and create a new post or select an existing post to edit. Paste in your code or write it in the post editor:
<p>Hello, this is some <strong>HTML</strong> code.</p>
-
-
3
Find every left-angled HTML bracket and convert it to the HTML special character code for the less-than symbol. Repeat this step for all right-angled HTML brackets using the code for the greater-than symbol:
<p>Hello, this is some <strong>HTML</strong> code.</p>
-
4
Wrap your code in "<pre>" tags. Most highlighter plugins use SyntaxHighlighter by Alex Gorbachev, which requires the following code:
<pre class="brush: html"></pre>
Change "html" to the name of the language you need to highlight, such as "css" for style sheet code or "js" for JavaScript. This special class turns the highlighter on and tells it how to color the code you embedded.
-
1
Tips & Warnings
Get instructions for your specific highlighter plugin by going to its configuration page under "Settings" or by clicking "Visit plugin site" on the Plugins screen.
If you do not convert the HTML brackets to special character codes, then the browser will treat the HTML tags in your embedded code as part of the Web page's actual programming.
