CODE GLOW

SYNTAX HIGHLIGHTING & CONTROL

Get It Now →



Why Code Glow?

The feature that really sets Code Glow apart from other syntax highlighting plugins is that it makes syntax highlighting available to every WordPress post, page, and custom post type editor on your site.  Not merely a pleasure for your eyes, but an altogether practical functionality for anyone creating content for the web.

With the recent release of PageLines Framework 2.3, everyone has enjoyed the addition of 2 code boxes that have been enhanced with syntax highlighting (custom code CSS/LESS editor, and headerscripts).  Code Glow uses the same highlighting engine to maintain consistency and enhances more editors, as well as giving the user a choice of some really nice highlighting themes to choose from that affect ALL enhanced editors, and a few options that control some other aspects of the enhanced editor like how to handle line wrapping.

In addition to it’s enhancements, Code Glow also supports pre-2.3 versions of the PageLines Framework (2.0 and above).  This allows users who may not have the most recent version of the framwork for whatever reason to enjoy all the same benefits.

Demo

Features

Syntax Highlighting for WordPress Post HTML Editors

Code Glow makes syntax highlighting available where you need it most on every post, page, & custom post type html editor in WordPress.  However, directly enhancing the main html editor that’s married to every visual editor is tricky to put it lightly — it doesn’t really work.

To activate syntax highlighting for a given post/page, when editing, switch to the HTML editor mode, and click on the new Code Glow quicktag.

Click the added “Code Glow” quicktag to activate the enhanced editor.

This will launch the enhanced editor in a big responsive modal/overlay window.  Continue to edit away to your heart’s content, then to return, simply click the “Close” button on the bottom, or click on the gray backdrop.

Post HTML enhanced editor modal – click to view full size – it’s really not blurry – promise.

5 Beautiful Highlighting Themes to Choose From

Yes, 5 — I don’t think the Default one is that great ;)  So technically there are 6 options to choose from, 3 light, and 3 dark schemes.  You don’t have to try each option to see what it will look like either.  The highlighting theme is chosen using the graphic selector, so you can see what the background/foreground color will be as well as some of the accent colors.

About the themes

I tried to pick some popular color schemes (like Monokai Bright from Sublime Text shown above), while keeping a good variety.  I originally started out with more, but weeded several out that were too similar.  I’m particularly fond of the Bootstrap color scheme which I created using the ever-popular Twitter Bootstrap colors, which is also the Code Glow default.

Personalized Preferences

All Code Glow options are user-specific, so whatever you choose is just for you!  This includes, highlighting theme and all the other editor options that are available.

Options

Color Scheme

Controls the colors that are applied to your code.
(Default: bootstrap)

Post Editor

Escape Key

Whether or not the enhanced editor for posts/pages should close should close when the escape key is pressed.
Enabled closes on escape key press.
(Default: enabled)

Backdrop Click

Whether or not the enhanced editor for posts/pages should close when the backdrop behind it is clicked.
Enabled closes on backdrop click.
(Default: enabled)

Editor Options

Line Wrapping

Whether or not the editor should wrap long lines or scroll horizontally.
(Default: enabled)

Line Numbers

Whether or not to show the line numbers on the left side of the editor.
(Default: enabled)

Bracket Matching

Bracket matching highlights both opening { and closing brackets } in a block of code when the cursor is next to one of them.
(Default: enabled)

Editor Options (cont)

Indent Size

Defines the number of spaces used when indenting.
(Default: 2)

Indent With Tabs

Whether when indenting, tabs should replace spaces. Number of spaces replaced depends on Tab Size.
(Default: off)

Tab Size

Width of a tab character in spaces
(Default: 4)