How To Highlight Syntax Code Block Using CSS
This is the best online syntax highlighter tool that generates pure HTML code blocks without any WordPress plugin that you can color your code and paste to your blog or website. Easy for users to see the snippets in the code block in a clean and colorized format. Customize CSS as per your preference and insert the style sheet with a few easy steps. This Code highlighter runs Extremely fast, easy to use, and can highlight thousands of lines of code in seconds.
Click on the “Display Demo” button to see a quick sample and then start generating your custom code block by just following a few easy steps.
Don’t forget to add the CSS style sheet and please read the easy instructions – How to configure it in WordPress, Blogger, and HTML web pages. Also read why to avoid Plugins.
Step-1: Paste Reserved Keywords with comma-separated (no blank space).
Step-2: (Optional) Paste Custom Keywords with comma-separated.
Step-3: Input – Paste your code in the text area and then click on Generate button to get the HTML code block.
Step-4: Output – Copy and paste generated HTML output into your blog or website.
Preview – Finally, this is how your syntax or code block will be displayed on your webpage. (Clear cache and refresh the page again).
No output to display. Paste your code in Input area (Step-3) and click on Generate buttonCustom Style Sheet – CSS
Important – Don’t forget to insert this CSS style sheet into your website. Please read the instructions below and configure CSS based on your need.
pre.pchl {background-color:#f8f8f8;border-color:#dfdfdf;border-style:solid;border-width:1px;}
.pchl code {color:#000000;border-width:0px;}
.pchl .key {color:#0000ff;}
.pchl .com {color:#008000;}
.pchl .str {color:#a31515;}
.pchl .custkey {color:#3B97D6;}
Instructions – How to configure
1. If you are running WordPress or Blogger based blog, then follow the below steps
Steps in WordPress:
1) Add CSS – One-time configuration
a. Login into WordPress and in the left menu, go to Appearance and click Customize.
b) In the theme customizer interface, click Additional CSS.
c) Copy & paste the CSS style sheet into the editor window.
d) click Publish button on the top.
2) Add Custom Code block
a. Go to WordPress Page in edit mode and add Custom HTML block
b. Use this tool and generate your custom HTML code.
c. Copy & paste the final output in the Custom Html block.
d. Switch to preview mode or publish it and you can see snippets in a code block with colorize format.
e. Repeat this step whenever you need.
Steps in Blogger:
1) Add CSS – One-time configuration
a. Login into your blog and in the left menu, click Theme or Template and click Customize.
b. In the left menu, click Advanced.
c. Click the Down arrow and then click Add CSS.
d. Add the CSS style sheet (copy & paste) into the edit window, and at the bottom right, click Save
2) Add Custom Code block
a. Edit your web page
b. Use this tool to generate your custom HTML code.
c. Copy & paste the final output on your page.
d. Save it and see colorize code snippet on the preview or published page.
e. Repeat this step whenever you need.
2. If you are running a blog based on C# or Java, or any other programming languages.
1) Add CSS
Insert the CSS style sheet in the <head> section of your webpage (HTML) and it can be done in two ways, either:
a. Use <script type=”text/css”>…</script> block
or
b. Use <link> tag as in external style sheet, example, <link rel=”stylesheet” type=”text/css” href=”yourCSSfile.css” />
2) Add Custom Code block
a. Edit your web page
b. Generate custom HTML code by using this tool.
c. Copy & paste the final output on your page.
d. Save it and see colorize syntax in the code block on the preview or published page.
e. Repeat the same steps whenever you need.
Avoid WordPress Plugins – Why?
There are many syntax highlighter plugins available in the market which looks pretty and provides different theme or style to show the code snippets. But in reality, you might face problems in managing such plugins with your live website, such as:
Updating version
It is necessary to update any plugin or software to the latest version to have error-free service and to use new enhanced features. But updating both, WordPress and Plugins, is really a challenging task. Plugins receive regular updates and occasionally security-related updates. Care must be taken when updating these because plugins and some versions of WordPress can have compatibility issues. You might face situations like:
a. You cannot update WordPress because the current plugin version is not compatible with the new version of WordPress. You have to wait until Plugin’s next new release is available.
b. Even if the new version is available for a Plugin, you cannot make sure the latest version is stable and tested well with the new version of WordPress.
So, either way, you are stuck and cannot take advantage of the new enhanced features of the latest version – High risk.
Maintenance
If the plugin’s owner or a developer stops providing updates then security issues may appear and cannot be fixed without a technical support team. Seen plugins that have good installation count and gained popularity initially but later users switched to another alternative plugin because it is poorly supported or outdated. Realtime screenshots are given below.
In conclusion, the plugin requires full-time developer support to continuously focus on performance, security, database, code quality and class-based functions. Failing in any of these will cause some kind of negative impact on websites and bring down the overall ranking.
So better to use this tool to generate manual code blocks to highlight any syntax on any web page. The biggest advantages are – it will work seamlessly even after updating WordPress to its latest version, natural performance as it is a pure HTML syntax, no maintenance is required, and need not worry about security because it is just HTML content with CSS just like any other section or block in the webpage.
If there is any issue with this tool or feedback, please mention it in the comment section.
Thanks 🙂