Background

In this post, we will offer a few examples of code blocks in WordPress.

We will not use the GUI Editor Pane.

But, the HTML Pane.

 

Using Code Blocks in WordPress

SQL

SQL – Example – 01

select

     personID

   , personName

   , personAddressStreetName

   , personCity

   , personState

   , personPostalCode


from  [dbo].[person]

Python

Python – Example – Python – If/Else If

educative.io

Onyejiaku Theophilus Chidalu

educative.io

If-elif-else statement in Python

Onyejiaku Theophilus Chidalu

https://www.educative.io/answers/if-elif-else-statement-in-python

is_odd = False
is_prime = True
if is_odd:
    print("it's an odd number")
    print('They are not divisible by 2')
elif is_prime:
    print("it's a prime number")
    print("They only have two factors, itself and 1.")
else:
    print("it's an even number")
    print('They are divisible by 2.')

 

Bash

Bash – ls command – ll alias

ll

 

Images

SQL

SQL – Example – 01

Python

Python – Example – Python – If/Else If

educative.io

Onyejiaku Theophilus Chidalu

 

Bash

Bash – ls command – ll alias

How To

Add Code Block

HTML

1. wp:code
   • Add wp:code TAG
     • Begin
       • Add <!– wp:code –>
     • End
       • Add <!– /wp:code –>
2. pre class=wp-block-code
   • Add pre-formatted code block, class=wp-block-code TAG
     • Begin
       • Add <pre class=”wp-block-code”>
     • End
       • Add </pre>
3. code
   • Add code TAG
     • Begin
       • Add <code>
     • End
       • Add </code>

 

Code Sample

1. GitLab
   • WordPress – Adding Code
     Link

 

Summary

The combination of:-

1. <!– wp:code –>
2. <pre class=”wp-block-code”>
3. <code>

works well.

There are some aesthetic limitations.

Such as:-

1. Syntax Lighting
   • Keywords are not color coded

 

References

1. WordPress
   • Back to home > Content and Media > Blocks > Code Block
     Link
2.  HubSpot
   • Anna Fitzgerald
     • WordPress Code Blocks: How to Display Code in WordPress Blog Posts
       Link