• Home
  • Archive
  • Tools
  • Contact Us

The Customize Windows

Technology Journal

  • Cloud Computing
  • Computer
  • Digital Photography
  • Windows 7
  • Archive
  • Cloud Computing
  • Virtualization
  • Computer and Internet
  • Digital Photography
  • Android
  • Sysadmin
  • Electronics
  • Big Data
  • Virtualization
  • Downloads
  • Web Development
  • Apple
  • Android
Advertisement
You are here: Home » How To Use WordPress Crayon Syntax Highlighter Theme Editor To Match Theme

By Abhishek Ghosh September 11, 2018 10:20 pm Updated on September 11, 2018

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

Advertisement

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) :

Advertisement

---

Vim
1
Version 2.8.4 | By Aram Kocharyan | Visit plugin site | Settings | Theme Editor | Donate

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) :

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

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 :

Vim
1
2
http://aramk.com/blog/2012/12/27/crayon-theme-editor/
https://github.com/aramk/crayon-syntax-highlighter

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.

Tagged With wordpress crayon syntax highlighter

This Article Has Been Shared 480 Times!

Facebook Twitter Pinterest
Abhishek Ghosh

About Abhishek Ghosh

Abhishek Ghosh is a Businessman, Surgeon, Author and Blogger. You can keep touch with him on Twitter - @AbhishekCTRL.

Here’s what we’ve got for you which might like :

Articles Related to How To Use WordPress Crayon Syntax Highlighter Theme Editor To Match Theme

  • Syntax Highlighting in WordPress Without Plugin

    Syntax Highlighting in WordPress Without Plugin is a method which will show you how easy Syntax Highlighting is in WordPress in Single post without plugin.

  • Loading WordPress Backend Faster : Easy Guide

    Loading WordPress Backend Faster is a dream to many. Somehow if they can manage the Frontend to load faster, the backend remains badly slow. Here is a guide!

  • Scalable MySQL Database for WordPress with Rackspace Cloud

    Scalable MySQL Database for WordPress is very easy to create as Rackspace allows Cloud Database,so does Amazon. Here is a guide for high performance WordPress.

  • Creating Own WordPress Theme by Full Modification of Official Theme

    Creating Own WordPress Theme can be made easy by full modification of any WordPress official Theme or other theme or theme framework’s Child Theme.

  • WP Enqueue Script For WordPress Themes : Handy Guide

    WP Enqueue Script For WordPress Themes Gives Better Control on How, Which and When You Want to Load Your JavaScript or CSS Files Like HTML Pages.

Additionally, performing a search on this website can help you. Also, we have YouTube Videos.

Take The Conversation Further ...

We'd love to know your thoughts on this article.
Meet the Author over on Twitter to join the conversation right now!

If you want to Advertise on our Article or want a Sponsored Article, you are invited to Contact us.

Contact Us

Subscribe To Our Free Newsletter

Get new posts by email:

Please Confirm the Subscription When Approval Email Will Arrive in Your Email Inbox as Second Step.

Search this website…

 

Popular Articles

Our Homepage is best place to find popular articles!

Here Are Some Good to Read Articles :

  • Cloud Computing Service Models
  • What is Cloud Computing?
  • Cloud Computing and Social Networks in Mobile Space
  • ARM Processor Architecture
  • What Camera Mode to Choose
  • Indispensable MySQL queries for custom fields in WordPress
  • Windows 7 Speech Recognition Scripting Related Tutorials

Social Networks

  • Pinterest (22.1K Followers)
  • Twitter (5.8k Followers)
  • Facebook (5.7k Followers)
  • LinkedIn (3.7k Followers)
  • YouTube (1.3k Followers)
  • GitHub (Repository)
  • GitHub (Gists)
Looking to publish sponsored article on our website?

Contact us

Recent Posts

  • Types of Blackjack Variants: Discover the Different Versions of the Game May 23, 2022
  • How Cloud, Robotics And Sensor Technologies Are Changing The Business Landscape May 23, 2022
  • Modernizing Your Business With a Hybrid Cloud Strategy May 22, 2022
  • Big Data in Sports May 20, 2022
  • FaaS Versus PaaS Deployment: What You Should Know May 18, 2022

About This Article

Cite this article as: Abhishek Ghosh, "How To Use WordPress Crayon Syntax Highlighter Theme Editor To Match Theme," in The Customize Windows, September 11, 2018, May 24, 2022, https://thecustomizewindows.com/2018/09/how-to-use-wordpress-crayon-syntax-highlighter-theme-editor-to-match-theme/.

Source:The Customize Windows, JiMA.in

This website uses cookies. If you do not want to allow us to use cookies and/or non-personalized Ads, kindly clear browser cookies after closing this webpage.

Read Privacy Policy.

PC users can consult Corrine Chorney for Security.

Want to know more about us? Read Notability and Mentions & Our Setup.

Copyright © 2022 - The Customize Windows | dESIGNed by The Customize Windows

Copyright  · Privacy Policy  · Advertising Policy  · Terms of Service  · Refund Policy