Certain textboxes on your Shift72 platform support markdown. These are Film records Synopsis field, a Pages Content field, a Collections Description, and Bundle Descriptions.

Some Markdown is unsupported due to how it interacts with the template.

HTML tags are not supported in apps, if you will be using an app please do not use HTML tags on your platform.

Contents:

  1. Horizontal Offsets

  2. Vertical Offsets

  3. Headings

  4. Lists

  5. Right to Left Text

  6. Display Special Characters

  7. Abbreviations

  8. Superscript

  9. Subscript

  10. Small Text

  11. Highlighting

  12. Underlining

  13. Strikethrough

  14. Combining Tags

  15. Tables

  16. Image Links

  17. Hidden Text

  18. Horizontal Rule

  19. Code

  20. Unsupported Formatting

Supported Markdown:

Horizontal Offsets:

Markdown does not recognise multiple consecutive spaces. To create a horizontal offset, a blank character can be used. To add a blank character, hold ‘Alt,’ then on the Numpad of your keyboard type 255, then release ‘Alt.’ A blank character will appear. This can be used as many times in a row as necessary to get a horizontal offset.

Note: this will only work in windows operating systems.

Back to Top


Vertical Offsets:

Markdown does not recognise multiple consecutive newline characters. These are what is typed when you press ‘Enter’ while typing. To add more of these, use the HTML tag <br/>.

Back to Top


Headings:

To add a heading, type a ‘Hash’ (#) symbol. The number of hash (#) symbols before text indicates the type of heading that is being added. Headings increase the size of the text. e.g.

# Heading 1

## Heading 2

### Heading 3

Etc…

Heading 1 will be the largest text. Every subsequent heading will have smaller text than the last.

Back to Top


Lists:

A list can be created in Markdown, which will show up on the front end of your Shift72 platform.

This can be done with either a ‘Hyphen’ (-) before each entry to have an unordered list or with Numbers before each entry to create an ordered list.

Markdown will also automatically order a numbered list, regardless of what the numbers are. For example, typing the text below:

1. First Item

1. Second Item

1. Third Item

Will display as this on the front end:

  1. First Item

  2. Second Item

  3. Third Item

If you would like to avoid a number, followed by a full stop from becoming an ordered list, you will need to escape the full stop with a backslash:

1\.

This will display as 1. on the front end without becoming an ordered list.

Back to Top


Right to Left Text:

Right to left text can be formatted by adding <bdo dir="rtl"> … </bdo> around the text you want to display in right to left orientation. The text below:

<bdo dir="rtl"> Right to left text </bdo>

Will display like this on the front end:

Back to Top


Display special characters:

Some characters are used for Markdown formatting. Sometimes you will want to display these normally. To do this, simply add a backslash (\) before them, and they will show up normally.

Below is a list of characters that will need a backslash to display normally.

\ Backslash

` Backtick

* Asterisk

_ Underscore

{ } Curly Brace

[ ] Square Brackets

( ) Parenthesis

# Hash

+ Plus sign

- Hyphen

! Exclamation mark

. Full Stop

Back to Top


Abbreviations:

Abbreviations can be used by adding <abbr> tags around the text. The title will be added within these tags. So the text below:

<abbr title="Shift72 Film Festival">S72FF</abbr>

Will display like this on the front end:

Which you can then mouse over to display the full name:

Back to Top


Superscript:

Superscripts can be used by adding <sup> … </sup> tags around text. The text below:

Superscript<sup>TM</sup>

Will display like this on the front end.

Back to Top


Subscript:

Similar to superscripts, subscripts can be used by adding <sub> … </sub> tags around text. The text below:

Subscript<sub>TM</sub>

Will display like this on the front end.

Back to Top


Small text:

Text size can be reduced by adding <small> … </small> tags around the text.

<small>Small</small> Text

Will display like this on the front end:

Back to Top


Highlighting:

Text can be highlighted by adding <mark> … </mark> tags around the text.

<mark>Highlight</mark>

Will display like this on the front end:

Back to Top


Underlining:

Text can be underlined by adding <ins> … </ins> tags around the text.

<ins>Underline</ins>

Will display like this on the front end:

Back to Top


Strikethrough:

You can add a strikethrough to text by adding <del> … </del> tags around the text.

<del> Strikethrough </del>

Will display like this on the front end:

Back to Top


Combining Tags:

Tags can be combined to give the same text the effect of multiple tags.

The text:

<small><b> Small and bold </b></small>

And

<ins><del> Strikethrough and underline</del></ins>

Will display like this on the front end:

This will also apply to any number of tags used around a single piece of text, so the text below:

<small><b><ins><del> Strikethrough and underline and small and bold </del></ins></b></small>

Will display like this on the front end:

This is a combination of strikethrough, underlined, small and bold text.

Back to Top


Tables:

Tables can be added to the text in your Shift72 platform. The tables do not have outlines, but the text is formatted as a table. An example of this can be seen below:

The code below is used to create the above table.

<table border="1" cellpadding="4" cellspacing="1">

<thead><tr><th>Column 1</th><th>Column 2</th></tr></thead>

<tbody>

<tr valign="top"><td>First Entry</td><td>Second Column</td></tr>

<tr valign="top"><td>Second Entry</td><td>Second Column 2</td></tr>

</tbody>

<tfoot><tr valign="top"><td>Third Entry</td><td>Second Column 3</td></tr>

</tfoot>

</table>

Each line means as follows:

<table border="1" cellpadding="4" cellspacing="1">

  • This is the table borders.

  • The border is the width of the lines.

  • Cell padding is the space between the cell walls and the content.

  • Cellspacing is the space between cells.

<thead><tr><th>Column 1</th><th>Column 2</th></tr></thead>

  • This is the heading of the table.

  • <thead> indicates this is the heading.

  • <tr> indicates this is one row.

  • <th> indicates each heading entry.

  • </th>, </tr> and </thead> indicate closing the corresponding block.

<tbody>

  • <tbody> indicates this is the beginning of the body of the table.

<tr valign="top"><td>First Entry</td><td>Second Column</td></tr>

  • This is the first line of the body, <tr tr valign="top"> is the same as <tr> but aligns text to the top of the row.

  • <td> indicates each line of entry in the body.

<tr valign="top"><td>Second Entry</td><td>Second Column 2</td></tr>

  • This line is very similar to the last one.

</tbody>

  • This is closing the body of the table.

<tfoot><tr valign="top"><td>Third Entry</td><td>Second Column 3</td></tr>

  • <tfoot> is opening the footer of the table.

  • <tr tr valign="top"> is the same as above.

  • <td> is the same as above.

</tfoot>

  • This is closing the footer of the table.

</table>

  • This is closing the table.

Back to Top


Image Links:

You can create a clickable image that will redirect users using the code below:

<a href=LINK_HERE rel=”DESCRIPTION_HERE”>![IMAGE](IMAGE_LINK_HERE)</a>

This functions the same as a regular link but uses an image instead of text. Below is an explanation of how to use this code to create an image link.

Replace LINK_HERE with the URL the image will link to.

Replace DESCRIPTION_HERE with a description of the link.

Replace IMAGE_LINK_HERE with the URL of the image users will click to be redirected.

The code below is a working example of this, paste it into a supported text box to try it out to see how this works.

<a href= https://www.shift72.com/ rel="Shift 72">![IMAGE](https://www.automile.nz/wp-content/uploads/shift72_logo.png)</a>

Back to Top


Hidden Text:

Markdown allows you to create a clickable button that will reveal text when clicked. This can be useful to avoid cluttering up a page.

Use the code below:

Hidden text can be added by formatting as follows:

<details>

<summary>Click Here</summary>

So it is revealed

</details>

To create this text:

Once clicked, it will open to reveal the <summary> text.

This can also be used with images, so a large image can be added without cluttering up a page.

Back to Top


Horizontal rule:

A horizontal rule is a separator line that can be used to split up blocks of text. This can be added either using </hr> or 3 underscore (___).

This can be written like as such:

Separator below Separator below

___ or </hr>

Separator above Separator above

These will be displayed as below on the front end:

Back to Top


Code:

A code block can be added to your platform by adding backticks on either side of the text.

This text:

test `test`

Will display like this on the frontend:

This can also be done using <code> ... </code> tags.

Back to Top


Unsupported Formatting:

&nbsp:

Non-breaking space will just display as &nbsp on the frontend.

<p style=”text-align:ALIGNMENT”> </p> - Text alignment:

This will not work on your front end as this is overwritten by the text alignment in the front end template.

<svg> - svg images:

SVG Images are unsupported on the front end of your platform.

Text colours:

Text cannot be recoloured in markdown supported fields. This is because the colour is overwritten by the template once the text is displayed on the front end.

<blockquote> ... </blockquote> - blockquotes:

Blockquotes do not show up on the front end.

<kbd> … </kbd> - Keyboard Input:

This does not have any effect on the frontend.

<p style="font-size:24px;"> ... </p> Font size:

This does not have any effect on the frontend.

Back to Top

Did this answer your question?