How To Use WordPress Crayon Syntax Highlighter Theme Editor To Match Theme

Probably most of the Crayon Syntax Highlighter plugin users know that it has a Theme Editor. Here is How To Use WordPress Crayon Syntax Highlighter Theme Editor To Match WordPress Theme. I believe that very few ever tried it. I had a misconception that how much a WordPress plugin’s syntax highlight can have powerful editor. Curiously I opened the link of the editor and it was a surprise. The theme editor is less discussed but powerful.

How To Use WordPress Crayon Syntax Highlighter Theme Editor

I will suggest to use Adobe Photoshop and some online color palettes generator like coolors.co to create a meaningful template to check whether the thing matches as image. You can look at css-tricks.com to have idea what I am talking about. For codes, we should have deep blue colored top bar like our navigation bar and placeholder of coding should be a shade of grey.

The link of the editor is from Plugins > Installed Plugins > Crayon Syntax Highlighter (look at the hyperlinks where Author name, settings are usually shown) :

Open the theme editor. It will prompt you to copy your current theme. For that reason, select a theme which has something you basically want. Like dark, light etc. You can work on it, save or discard changes. You will get live preview of some parts (not everything is in the example snippet). The copied CSS file will remain and will show in list of themes from Settings page. From the Settings page, you can delete it. You can manually copy that CSS from FTP or SSH to place like GitHub as backup or sharing with the other users. The editor looks like this (I altered some values of Solarized Dark) :

i icon = Information
Pallet icon = pallet of syntax highlighting (visual CSS editor)
Box icon = frame, outline (visual CSS editor)
Script icon = background (visual CSS editor)
123 icon = line number (visual CSS editor)
Wrench icon = toolbar (visual CSS editor)

Under the Pallet icon (pallet of syntax highlighting), we have the following CSS classes (phrases differs across language) :

Comment
String
Preprocessor
Tag
Keyword
Statement
Reserved
Type
Modifier
Identifier
Entity
Variable
Constant
Operator
Symbol
Notation
Faded
HTML
Unhighlighted

If your basic of vocabularies of coding is not strong then you can web search with the above phrase followed by the word syntax (one by one, except the word Reserved. Like preprocessor syntax) to get an idea of what part they are taking about and make a list, like :

Comment: Inactive part of code. Usually starts with #, *, ; etc.
String: array of characters terminated by a null character ‘\0’.
Preprocessor : like #include, __FILE__. We usually add a space for comment with hash, like # include this

Not all who can edit CSS, design will know formal programming. Official documentation is not huge :

I can not find themes/default/default.css in their instruction. So editing is towards guess.

You know your website’s WordPress theme’s hex values. In case you do not know find them out using some color picking tool. Biggest part is planning the designing to match your website’s look. You can add your fonts in wp-content/uploads/crayon-syntax-highlighter/fonts. You can use own font within themes overriding with @font-face.

I was thinking to improve the current theme and accidentally noticed the thing. I guess this guide will be minimally helpful.