How to Add Source Code to a WordPress Post

Add source code to a WordPress post

WordPress does not support adding source code to a post by default. The only thing WordPress supports is adding preformatted text. This will look like this:

{
    "preformatted": "text"
}

While this might work for posting a short source code example or a JSON object you will soon find that it will not work for larger code snippets.

As always a perfect WordPress plugin is available to support source code highlighting. It is called Enlighter – Customizable Syntax Highlighter. Once installed and activated you can post almost any kind of source code with the perfect source code highlighting.

After you installed and activated the plugin you will see a new shortcut added to the text editor:

Enlighter button in the WordPress editor
Enlighter button in the WordPress editor

Click the Code Insert button and insert the code you want in the pop up that will appear:

Enlighter code insert pop up
Enlighter code insert pop up

When the code is inserted you can edit it and change the syntax highlighting.

Enlighter Syntax Highlighting Examples

The plugin offers a variety of different syntax highlighting styles. Below I compiled some highlighting styles for an example python code.

Theme: Default

# This is a comment
from random import shuffle

class Test(object):
  TXT = 'test'
  NBR = 1234
 
  def test(self):
    while True:
      print ("Hello!")

Theme: WPCustom

# This is a comment
from random import shuffle

class Test(object):
  TXT = 'test'
  NBR = 1234
 
  def test(self):
    while True:
      print ("Hello!")

Theme: Enlighter

# This is a comment
from random import shuffle

class Test(object):
  TXT = 'test'
  NBR = 1234
 
  def test(self):
    while True:
      print ("Hello!")

Theme: Godzilla

# This is a comment
from random import shuffle

class Test(object):
  TXT = 'test'
  NBR = 1234
 
  def test(self):
    while True:
      print ("Hello!")

Theme: Beyond

# This is a comment
from random import shuffle

class Test(object):
  TXT = 'test'
  NBR = 1234
 
  def test(self):
    while True:
      print ("Hello!")

Theme: Classic

# This is a comment
from random import shuffle

class Test(object):
  TXT = 'test'
  NBR = 1234
 
  def test(self):
    while True:
      print ("Hello!")

Theme: MooTwo

# This is a comment
from random import shuffle

class Test(object):
  TXT = 'test'
  NBR = 1234
 
  def test(self):
    while True:
      print ("Hello!")

Theme: Eclipse

# This is a comment
from random import shuffle

class Test(object):
  TXT = 'test'
  NBR = 1234
 
  def test(self):
    while True:
      print ("Hello!")

Theme: Droid

# This is a comment
from random import shuffle

class Test(object):
  TXT = 'test'
  NBR = 1234
 
  def test(self):
    while True:
      print ("Hello!")

Theme: Minimal

# This is a comment
from random import shuffle

class Test(object):
  TXT = 'test'
  NBR = 1234
 
  def test(self):
    while True:
      print ("Hello!")

Theme: Atomic

# This is a comment
from random import shuffle

class Test(object):
  TXT = 'test'
  NBR = 1234
 
  def test(self):
    while True:
      print ("Hello!")

Theme: Rowhammer

# This is a comment
from random import shuffle

class Test(object):
  TXT = 'test'
  NBR = 1234
 
  def test(self):
    while True:
      print ("Hello!")

Theme: Git

# This is a comment
from random import shuffle

class Test(object):
  TXT = 'test'
  NBR = 1234
 
  def test(self):
    while True:
      print ("Hello!")

Theme: Mocha

# This is a comment
from random import shuffle

class Test(object):
  TXT = 'test'
  NBR = 1234
 
  def test(self):
    while True:
      print ("Hello!")

Theme: MooTools

# This is a comment
from random import shuffle

class Test(object):
  TXT = 'test'
  NBR = 1234
 
  def test(self):
    while True:
      print ("Hello!")

Theme: Panic

# This is a comment
from random import shuffle

class Test(object):
  TXT = 'test'
  NBR = 1234
 
  def test(self):
    while True:
      print ("Hello!")

Theme: Tutti

# This is a comment
from random import shuffle

class Test(object):
  TXT = 'test'
  NBR = 1234
 
  def test(self):
    while True:
      print ("Hello!")

Theme: Twilight

# This is a comment
from random import shuffle

class Test(object):
  TXT = 'test'
  NBR = 1234
 
  def test(self):
    while True:
      print ("Hello!")

All of these themes can also be used without any line numbering or using inline code highlighting which can be used in a sentence.

Additional CSS for Activation or Primer WordPress Theme

On this website I use the Activation theme which is a child theme of Primer. When I first installed and activated the Enlighter code highlighting plug in the code looked weird. After a little bit of CSS debugging I found out that the Activation theme was overwriting some of the CSS styles of the Enlighter plugin.

For that reasons I added the following custom CSS code via the additional CSS feature in WordPress.

.EnlighterJSWrapper ol li {
  font-family:"Source Code Pro", "Liberation Mono", "Courier New", Courier, monospace
}

.EnlighterJSWrapper ul li {
  font-family:"Source Code Pro", "Liberation Mono", "Courier New", Courier, monospace
}

To use the Source Code Pro font you have to activate it by going to the Enlighter settings page. Under the Webfonts tab activate the Source Code Pro font and click on save.