Enter Programming Code In WordPress Posts or Pages via Classic Editor


student-849821_640

Whenever you try to enter code directly in the WordPress post or a page, its HTML or CSS corrupts the actual display. To display the code properly in the WordPress post or page, follow this;

Login to your WordPress admin control panel;

https://website.com/wp-admin

Go to Dashboard –> Plugins  and click “Add New”

dd

Next, type “SyntaxHighlighter” in the search button and you’d see a plugin called “SyntaxHighlighter Evolved” by Alex Mills. Simply press button “Install Now” to install and press “Activate” afterwards;

ewrewr

Next, click on “New Post” or “New Page” link to start entering text and code like below. In the classic editor, click “Text” tab and enter code like this;

werewr

Your code should be displayed like this after saving/publishing the post;

This is HTML code that makes the character <b>bold</b>.

asdf

The numbers on the left side denote the line numbers. You can deactivate those line numbers in the SyntaxHighlighter plugin settings.

Untitled


Courtesy:

https://www.wpbeginner.com/wp-tutorials/how-to-easily-display-code-on-your-wordpress-site/

SyntaxHighlighter Evolved

2 thoughts on “Enter Programming Code In WordPress Posts or Pages via Classic Editor

  1. I see you have good knowledge on coding and wordpress HTML. I have one issue with my blog if you visit it, you’ll find too much space between words in some lines and that’s only in mobile view. Can you plz help. It’s by default I didn’t do anything.

    Liked by 1 person

    1. Your text is using “justified” alignment which is the best suitable option out there. Those tiny spaces are ignorable from design point of view. If you still wish to change anything, you can first look at; https://css-tricks.com/almanac/properties/t/text-align/#:~:text=center%20%E2%80%93%20Content%20centers%20between%20the,is%20along%20the%20right%20edge.
      and the theme author has a free discussion forum where you can post your question at; https://wp-royal.com/support-ashe-free/

      Like

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s