[Note] How to Style code in WordPress?

In WordPress, the edition of posts supports <code> tag. We can add <code> block by clicking Add block button.

 

Then, the default <code > style in WordPress looks like the following:

<!DOCTYPE html>
<html>
<head>
    <title>TITLE</title>
</head>
<body>
    <p>Test</p>
</body>
</html>

To add .class in Additional CSS can style the code block. We can click Appearance > Customize to arrive Additional CSS.

              

Here, we add class .codestyle in Additional CSS as an example, and click Publish.

     

Go back to edit post, click <code> block, and key in the class which we name codestyle in Block > Advanced > Additional CSS class(es).

Remark: The dot is not necessary here, and if there are multiple classes used, separate them with spaces.

After above steps,  the following code block which is styled with .codestyle will be displayed.

<!DOCTYPE html>
<html>
<head>
    <title>TITLE</title>
</head>
<body>
    <p>Test</p>
</body>
</html>

The text color is also changeable. We can click <code> block and Text Color to customize it.

 

The customized text shows as following:

<!DOCTYPE html>
<html>
<head>
    <title>TITLE</title>
</head>
<body>
    <p>Test</p>
</body>
</html>
(Visited 8 times, 1 visits today)