Inserting Code with the Code Block & the Custom HTML Block

Display a snippet of R or other code, or embed media using HTML.

Related Guides

You speak code? Great! WordPress offers two blocks for your coding-related needs.

The code block allows you to insert code snippets onto a page for instructional purposes. Using the code block, you can easily display almost any type of coding language for teaching or training.

You’ll see the code block on the HTML basics page.

The custom HTML block allows you to code a section of a page, much like the Classic Editor’s HTML tab. The block even allows you to preview the code right within the editor.

We recommend starting with blocks and using HTML only if you are confident with coding and familiar with the WashU Web Theme usage guidelines. The WashU Sites Support Team is unable to assist with issues caused by custom code.

When to use the code block and the custom HTML block

New to building pages in blocks? Get to know the block editor »

To display code:
Use the Code block

Use to share programming instructions.

Differentiates code snippet from body with gray background and monospace font
Maintains proper formatting, such as spaces and tabs

Pro Tip
To make formatting easier, write your code snippet in a text editor, then paste it into the code block.

To render code:
Use the Custom HTML block

Use to custom code a section of a page.

Allows for embedding media and interactive graphs
Requires coding knowledge and observing the WashU visual brand and theme usage guidelines

Custom coding is risky!
If you add custom code, test it across browsers and devices, ensure accessibility standards* are met, and continue testing as the theme and browsers are updated.

*According to World Wide Web Consortium Web Content Accessibility Guidelines (WCAG) 2.1, Level AA

Examples

Code block for teaching and sharing

Sharing shortcode

This code block demonstrates the shortcode used to insert a list of events assigned to category id 15.

[calendarp-events-list category="15"]

The below code block shows how to insert a single event using shortcode.

[calendarp-event event_id="31"]

Teaching Python

The code block below shows a script used to generate a list of links from a site.

import re

f = open('website.xml','r')
res = f.readlines()
for d in res:
    data = re.findall('<link>(https:\/\/.+)<\/link>',d)
    for i in data:
        print i

Custom HTML for embeds

Usually, embedding content from other websites is a breeze, and is as easy as copying and pasting a link. However, this copy-and-paste method only works for select websites.

To add content from other websites, insert the embed code using the Custom HTML block: