Adding a Field with the Rich Text schema allows users to customize the rich text that appears as part of a Pub. PubPub’s rich text fields support everything from images to tables, citations, videos and more.

This content is What You See Is What You Mean (WYSIWYM), which means it may not appear exactly on a site or in other aspects of PubPub Platform exactly as it appears in the editor. 

Note: Unlike Legacy, the Rich Text schema does not support Draft mode, collaborative writing, or collaborative editing. 

Text Formatting

Use the formatting bar, common keyboard shortcuts, or common Markdown shortcuts to format text. 

Block type formats are applied to the entire line of text, regardless of selection. Inline type formats can be applied at the cursor or to selected text. Most styles can be mixed with inline styles.

Header 1

Use: Click the Header 1 option in the format dropdown in the formatting bar or the Header 1 (H1) button in the inline formatting menu. Or, use the markdown shortcut #.

Result: Sets text to large H1 style

Type: Block (formatting is applied to the entire line).

Header 2

Use: Click the Header 2 option in the format dropdown in the formatting bar or the Header 2 (H2) button in the inline formatting menu. Or, use the markdown shortcut ##.

Result: Sets text to medium H2 style

Type: Block (formatting is applied to the entire line).

Header 3

Use: Click the Header 3 button in the format dropdown in the formatting bar or inline formatting menu. Or, use the markdown shortcut ###.

Result: Sets text to medium H3 style, and adds the header to the Pub navigation.

Type: Block (formatting is applied to the entire line).

Header 4

Use: Click the Header 4 button in the format dropdown in the formatting bar or inline formatting menu. Or, use the markdown shortcut ####.

Result: Sets text to medium H4 style, and adds the header to the Pub navigation.

Type: Block (formatting is applied to the entire line).

Header 5

Use: Click the Header 5 button in the format dropdown in the formatting bar or inline formatting menu. Or, use the markdown shortcut ###.

Result: Sets text to medium H5 style, and adds the header to the Pub navigation.

Type: Block (formatting is applied to the entire line).

Header 6

Use: Click the Header 6 button in the format dropdown in the formatting bar or inline formatting menu. Or, use the markdown shortcut ###.

Result: Sets text to medium H6 style, and adds the header to the Pub navigation.

Type: Block (formatting is applied to the entire line).

Bold

Example: This is regular text. This is bold text.

Use: Click the bold (B) button in the formatting bar or inline formatting menu. Or, use the keyboard shortcut cmd/ctrl-b.

Result: Sets text to bold style.

Type: Inline (formatting can be applied to part of a line).

Italic

Example: This is regular text. This is italic text.

Use: Click the italic (I) button in the formatting bar or inline formatting menu. Or, use the keyboard shortcut cmd/ctrl-i.

Result: Sets text to italic style.

Type: Inline (formatting can be applied to part of a line).

Subscript

Example: This is regular text. _{This is subscript}.

Use: Click the subscript (X₂) button in the formatting bar.

Result: Sets text to subscript style.

Type: Inline (formatting can be applied to part of a line).

Superscript

Example: This is regular text. ^{This is superscript}.

Use: Click the superscript (X²) button in the formatting bar.

Result: Sets text to superscript style.

Type: Inline (formatting can be applied to part of a line).

Strikethrough

Example: This is regular text. This is strikethrough text.

Use: Click the strikethrough (S̶) button in the formatting bar.

Result: Sets text to strikethrough style.

Type: Inline (formatting can be applied to part of a line).

Bullet List

Example:

• This is the first item in an unordered list.
• This is the second item in an unordered list.
  • This is a nested unordered list item.
    • This is a double-nested unordered list item.

Use: Click the unordered list button in the formatting bar. Or, use the markdown shortcut - . To create a second list item, type enter. To create a nested list item, use type tab. To un-nest a list item, type shift-tab.

Result: Creates an unordered bullet list.

Type: Block (formatting is applied to the entire line).

Ordered List

Example:

This is the first item in an ordered list.

This is the second item in an ordered list.

This is a nested ordered list item.

This is a double-nested unordered list item.

Use: Click the unordered list button in the formatting bar. Or, use the markdown shortcut 1. . To create a second list item, type enter. To create a nested list item, use type tab. To un-nest a list item, type shift-tab.

Result: Creates an ordered list.

Type: Block (formatting is applied to the entire line).

Link

Example: This is regular text. This is linked text.

Use: Click the link button in the formatting bar and type the linked text, or highlight the text to be linked. A caret appears at the start of the linked text. Select the caret to configure link attributes.

To remove a link, cursor to or hover over linked text and click the “link” button in the formatting bar.

Options (select the caret that appears in the editor to see additional options):

• href: specify the link's destination
• title: specify the text to appear upon hovering over the link
• target: specify where to open the linked document (in this tab, in a new tab, in a new browser)

Result: Adds a link to the text.

Type: Inline (formatting can be applied to part of a line).

Blockquote / quotation

Example:

This is a blockquote/quotation.

Use: Click the blockthrough (”) button in the formatting bar.

Result: Sets text to blockquote style.

Type: Block (formatting is applied to the entire line).

Inline code

Example: This is regular text. This is inline code.

Use: Click the code (</>) button in the formatting bar.

Result: Sets text to inline code style.

Type: Inline (formatting can be applied to part of a line).

Block code

Example:

This is a code block.

Use: Click the code block button in the formatting bar.

Result: Creates a code block.

Type: Block (formatting is applied to the entire line).

Inline math

Example: 

Use: Click the inline math (√) button in the formatting bar. We use KaTeX to render equations in real-time. For a full list of supported equations, see KaTeX’s support table and supported functions.

Result: Sets text to inline math style.

Type: Inline (formatting can be applied to part of a line).

Block math

Use: Click the block math ([√]) button in the formatting bar. We use KaTeX to render equations in real-time. For a full list of supported equations, see KaTeX’s support table and supported functions.

Result: Sets text to block math style.

Type: Inline (formatting can be applied to part of a line).

Media

Use: Click the media button in the formatting bar. In the menu that appears, drop files or browse files to upload media. 

Files

Images

Image with file extensions such as jpg, png, svg, webp, and gif images to Pubs. Images will be uploaded to and hosted from PubPub’s servers.

Example:

Use: Select image under files in the media modal. Click the upload button or drag a file into the upload pane.

Options (select the image header that appears in the editor to see additional options):

• id: specify a unique id for the image element
• class: specify a class for the image element
• alt: the alternative text that is to be displayed in place of an element that cannot be rendered.
• src: the URL or destination link for the image
• linkTo: the URL or destination link, to which, when the image is selected image, users will be redirected to
• credit: the credit information for the image
• license: the license information for the image
• width: the width of the image to display, in percentage. Image height will be automatically scaled to maintain its native proportions.
• align: left, center, right or full-width (disables size, center by default)