UH Hilo Content Management System

Formatting Content with the CMS

On this page:

Paragraphs and Line Breaks

A paragraph is one or more consecutive lines of text, separated by one or more blank lines. Content within a paragraph will wrap to fit the width of the screen (or container. Lines without blank lines are concatenated, and paragraph breaks are automatically added whenever a blank line is encountered.

To add a line break, append two blank trailing spaces to the end of a line. This can be useful when formatting poetry or address blocks. Line breaks cannot be used in markdown tables.

A screenshot showing rendered line breaks in a markdown sample

Quotations

Block quotes are handy for setting a quote apart from

the rest of the content.

To indicate a quotation, precede the first line of the paragraph with the > character.

Block quote example

Links are essential to web pages; they are the glue that holds a site together. Links consist of two parts - the link text, and the link destination. In Markdown format, the link text is between a set of square brackets - '[' and ']', followed by the link destination URL in between opening and closing parentheses - '(' and ')'. In the CMS page editor, the link text is colored dark blue, and the link URL is indicated in red.

[UH Hilo](https://hilo.hawaii.edu)

Link to UH Hilo

Link URLs should start with an https:// or http://, unless they are a link to another page on this website. View complete information about links on the Creating Links in the Content Management System help page.

Lists

Bulleted lists are created from one or more lines preceded by a dash and a space: -. Lists may be nested by using sets of four preceding spaces before the dash. So, the syntax for a double nested bulleted list would be as follows:

Nested lists example

Using Page Headings

Headings are used to separate content. There are several sizes of headings available, ranging from heading level 1 (the page title) to heading level 5 (the smallest sub-heading). In the CMS, use hashtags to indicate the level of the heading, with one hashtag for each level. For example, a heading level 2 would look like ## Major Heading and a heading level 3 would appear as ### Sub-heading. Using headings is optional, however if used, one should follow a logical order, and not skip levels. Headings cannot contain links, although you may make a heading linkable by appending an (invisible) symbol to the end, containing a unique ID. The format for a making a heading linkable is a set of curly braces { }, containing a unique identifier, preceded by a single hashtag #.

Markdown heading syntaxMarkdown syntax for various sizes of headings, indicated by a different number of preceding hashtags #.

Heading sizes rendered in HTMLRendered HTML of the various sizes of headings.

For more about headings, visit the Accessible Page Structure page.

Hawaiian Characters

The UH Hilo CMS is designed to make it easy to spell Hawaiian words properly, using Hawaiian Characters such as the ʻokina and kahakō. Do not use the single quote ('), apostrophe (’), or backtick (`) in place of the ʻokina.

The 'Insert special character' button includes all of the hawaiian characters, plus hard-to-type characters such as apostrophes and quotes.

backticks interpreted incorrectly Backticks (`) are used to denote a code block, and will not be interpreted correctly if used instead of the in place of the ʻokina (ʻ).

Insert special character menu items

Footnotes

Too add a footnote to a page, two elements are required. After the footnoted text, create a symbol consisting of a pair of square brackets [ ], containing a caret ^, followed by a unique reference. The reference need not be numeric, although it will be replaced with sequential numbers when the page is rendered. The complete symbol [​^ref] should follow your text, where you want the footnote to go.

Example text with footnote.[​^ref]

Additionally, a citation/reference is required - consisting of the same symbol, followed by a colon : and the text of your citation/reference. This can be anywhere on the page, but it will show at the bottom of the published page, with a link back to the referencing text.

Example footnote definition: [​^ref]: Footnote text.

Markdown syntax for footnoteFootnote syntax example

Rendered HTML for footnoteRendered footnote. Note the automatic numbering

Abbreviations

If you use jargon, or abbreviations with which your audience may not be familiar, it can be helpful to provide a definition. This can be done by creating a one-line abbreviation definition, using a syntax similar to the footnote definition, without the caret. The symbol should consist of an asterisk *, followed by pair of square brackets [ ] containing the abbreviation/acronym, and a colon :, preceding the expanded abbreviation. These definitions can be anywhere in the page text, although it is best-practice to put them at the beginning of the page.

Abbreviation Definition Example:
*[​CAFNRM​]: College of Agriculture, Forestry and Natural Resource Management

Once the abbreviation is defined, any instances of the shorthand will show the title (to sighted users) when they hover over the term. For the benefit of non-sighted users, it is also a good idea to include the expanded title in plain text, before the first usage.

Example Usage:
The College of Agriculture, Forestry and Natural Resource Management (CAFNRM) is one of six colleges at UH Hilo. Find the CAFNRM website at https://hilo.hawaii.edu/academics/cafnrm/.