How to Highlight code snippet in WordPress without using a Plugin?

From here, you can easily learn – how to Highlight code snippet in WordPress without using a Plugin. we always ignore plugin of WordPress as much as possible because we don’t want to make our site slower. So due to this if you are finding any ways to Highlight code snippet in WordPress without using a plugin, then you are riched at the right place.

Easily highlight code somethings like this

Steps for Highlighting code snippet in WordPress without a plugin

Simply add the following CSS codes in the additional CSS box which is located at this path in WordPress – Appearance/Customize/Additional CSS.

pre {
    margin-bottom: 22px;
 font-family: Consolas, Monaco, "Courier New", Courier, monospace;
 font-size: 12px;
 overflow: auto;
 background: #eee;
 padding: 10px;
 border: 1px solid #ddd;
 font-style: normal;
    font-weight: normal;
}

Step 1 – Copy this Code from this page.
How to Highlight code snippet in WordPress without using a Plugin - Step 1

Step 2 – Open Dashboard of your WordPress website & go in Appearance/Customize
How to Highlight code snippet in WordPress without using a Plugin - step 2

Step 3 – Now,click on additional CSS option.
How to Highlight code snippet in WordPress without using a Plugin - step 3

Step 4 – Right right on your mouse and click on the paste to paste the copied code here.
How to Highlight code snippet in WordPress without using a Plugin - Step 4

Step 5 – Once you paste the copied code, then click on the Publish button.
How to Highlight code snippet in WordPress without using a Plugin- step 5

Testing – Code snipped is highlighting or not

add random code into a wordpress post.
Finally, the code snippet will highlight like this

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

Loading…

0

Comments

0 comments