Markdown samples

This page highlights resources but is for now a placeholder that demonstrates using Markdown syntax, including multiple heading levels. (look at the text source for this page in WP to see how the formatting is specified)

Four documents can help you understand Markdown:

Here is a test of using internal links to create a table of contents:

Indented Text
Images

Here is a test of using external links to pages outside software.sil.org:

[External Link Text »](http://www.google.com/){.external}

External Link Text »

Accordion Shortcodes

This is a new plugin that provides show/hide functionality for really long pages. A list of advanced options can be found here.

These two links affect BOTH accordions: Open All » Close All »

These two buttons only affect the first accordion:

Great Big Ginormously Long Title of a Teeny Tiny Accordion Item

Second accordion item

A Third accordion

These two buttons only affect the second accordion:

Great Big Ginormously Long Title of a Teeny Tiny Accordion Item

Second accordion item

A Third accordion

top

This is an h2 heading (don’t use h1)

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

This is h3

Here is a table:

First Header	Second Header
Content Cell	Content Cell
Content Cell	Content Cell

This is h4

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

This is h5

This is h6

top

Indented Text

Left tab only

Left and right tabs

top

Images

Inline

<img src="/sample/wp-content/uploads/sites/53/2015/05/find.png" title="find" width="16" height="16" class="img-inline" />

This isn’t Markdown but is a paragraph demonstrating the inclusion of an inline graphic. The style needs to be specified in a certain way so that extra padding does not get added.

Popups

The following code example creates a Markdown image thumbnail with ALT text set to Charis SIL Type. Click the thumbnail to view the image at full size overlaying the entire page. Click anywhere outside the full-size image popup (or press ESC) to dismiss it.

<a href="yourImageFilePathName" rel="lightbox">
  ![Your ALT Text](yourImageFilePathName "Your TITLE text")
</a>

NOTES:

On mobile phones, this feature is disabled, and the thumbnail image remains at 100% of screen width for legibility.
You can also use <img src="YourImageFilePathName" class="yourCSSClassesHere" /> instead of the Markdown image code if you need additional CSS styling.

Animated SVG

NOTE: Unfortunately, IE doesn’t play well with SVG images without a lot of extra coding. So it is not recommended at this time.

<img src="/sample/wp-content/uploads/sites/53/2016/06/test1.svg" height="260" width="100%" title="Awami SVG Test #1" />

top

Code Examples

Single line of code

This is an example of a line of code!!!

Block of code

code snippet begins here
more code
and some more code
code snippet ends here

top

WOFF Support

You can now drag and drop *.woff files directly into your Product Site’s Media Library, just like any other image or media file. Then use the new FONT short code to generate the CSS that renders the WOFF on your page.

NOTEs:

Be sure to place your WOFFs into the Media Library before invoking the [font] short code that calls them. Otherwise, PHP errors will appear at the top of your page.
This feature only works at the page level, not the site level. So you will have to specify the [font] short code on each individual page where you want to display the WOFF.

Example

[font id='sch-cv44' face='Scheherazade-Regular' bold='Scheherazade-Bold' feats='cv44 1' rtl=1 size='160%']
[font id='gentium' face='GentiumPlus-R' italic='GentiumPlus-I']

Options

Name	Required?	Available Values	Default	Description
`id`	YES			Your name for this web font
`face`	YES			Name of WOFF file name for REGULAR font-family, MUST match name EXACTLY, case-sensitive, enclose value in single or double quotes
`bold`	NO			Name of WOFF file name for BOLD font-family, MUST match name EXACTLY, case-sensitive, MUST NOT be the same value as face, italic, or bolditalic, enclose value in single or double quotes
`italic`	NO			Name of WOFF file name for ITALIC font-family, MUST match name EXACTLY, case-sensitive, MUST NOT be the same value as face, bold, or bolditalic, enclose value in single or double quotes
`bolditalic`	NO			Name of WOFF file name for BOLD ITALIC font-family, MUST match name EXACTLY, case-sensitive, MUST NOT be the same value as face, bold, or italic, enclose value in single or double quotes
`feats`	NO			String containing array of key-value pairs for font-feature-settings, separate each key-value pair by comma, enclose entire array in single or double quotes [EX: ‘cv44 1, test 0’]
`rtl`	NO	0 (off) or 1 (on)	0	Set to 1 for right-to-left language classes
`size`	NO			Sets default font size of CSS class. Can be px, em, or %.

Troubleshooting

I see PHP error messages at the top of my page.

This likely means your [font] short code can’t find the WOFFs in your Media Library.

Check that you placed WOFFs into your Media Library.
Check that your face, bold, italic, and/or bolditalic values match EXACTLY the WOFF filename’s stem (case-sensitive).

I defined my WOFF font, but I don’t see it on my text.

View your page source and look for your WOFF CSS, specifically the @font-face rule. If the path to the WOFF file begins with a backslash, (e. g., \gentium.woff), then the WOFF file is missing from your Media Library. The @font-face value should ALWAYS contain a full path to the WOFF in your Media Library.
If it does, then verify you typed the file name EXACTLY as your face value (including case sensitivity). The WOFF filename’s stem must match the face value. For example, if your WOFF is Gentium.woff, then face='Gentium'.
If they do match, verify that you applied the correct CSS WOFF class name to your text. Using the above example, the generated CSS class should be your id value followed by -R. So if id='gentium', then your CSS class should be .gentium-R. Make sure you apply that class to your text. If you specified values for bold, italic, and/or bolditalic, those CSS classes should be generated as .gentium-B, .gentium-I, and .gentium-BI, respectively.

I specified the Regular (default) font, but it’s still bold and/or italic.

Your text may be inheriting bold or italic from some other class not related to WOFF support.

Check that your class value ends with -R (case-sensitive).
If it does, add the CSS class normal to your text. This removes ALL bold and italics.

Markdown samples

Accordion Shortcodes

Great Big Ginormously Long Title of a Teeny Tiny Accordion Item

Second accordion item

A Third accordion

Great Big Ginormously Long Title of a Teeny Tiny Accordion Item

Second accordion item

A Third accordion

This is an h2 heading (don’t use h1)

This is h3

This is h4

This is h5

This is h6

Indented Text

Left tab only

Left and right tabs

Images

Inline

Popups

Animated SVG

Code Examples

Single line of code

Block of code

WOFF Support

Example

Options

Troubleshooting

I see PHP error messages at the top of my page.

I defined my WOFF font, but I don’t see it on my text.

I specified the Regular (default) font, but it’s still bold and/or italic.

Other questions?

Top Links

Markdown (the old way)

WP Shortcode (the NEW way)

Basic

Link text alignment

Toggle on/off top border line

Toggle on/off top up arrows

Custom link text

Custom CSS styling