The ClearEvent Event Manager App allows basic formatting for certain text fields within the system using our rich-text editor. This allows you to apply formatting to text that is displayed on your Event Portal.
A Note About Formatting Text
Generally, we recommend that you format text sparingly. Overuse of formatting can make text hard to read or can interfere with how the information is presented within the Event Manager App or Event Portal.
Fields in the Event Manager App that support markdown will display the editor toolbar above the field as shown here:
NOTE: You cannot change the color, size, or font type that the system uses from the toolbar. This helps to ensure text is consistently formatted across your event portal and also adheres to modern web accessibility standards.
Getting Started
When working with fields that support Markdown, click the edit mode button (shown below) to put the editor into Markdown mode:
You can now directly make changes using Markdown formatting.
Basic Formatting
*some italic text*
**some bold text**
***some bold italic text***
~~some text with a strikethrough~~
Headings
Create headings to help separate and name sections of text. Headings will appear as large bolded text.
# My Heading 1
## My Heading 2
etc...
Links
By default, simple links (e.g. "https://example.com") and email addresses will be automatically hyper-linked.
If you wrap a valid URL in <> it will be turned into a link whose text is the link itself.
link to <http://www.google.com/>
If you want to show an email address as a link use this format. NOTE: This syntax does not use the <> characters:
this is my email myname@mail.com
If you need more control over the link text, you may use the following markdown syntax:
[Click Here](http://example.com)
Blockquote
To quote something use this syntax:
The quote
> Somewhere, something incredible is waiting to be known
has been ascribed to Carl Sagan.
Lists
Unordered Lists:
Creates a simple bulleted list.
* My Bulleted List Item
* My Bulleted List Item
Ordered Lists:
Created a numbered list.
1. My Numbered List Item One
2. My Numbered List Item Two
Nested Lists
You can create nested lists by indenting list items by four spaces.
1. Item 1
1. A corollary to the above item.
2. Yet another point to consider.
2. Item 2
* A corollary that does not need to be ordered.
* This is indented four spaces
* You might want to consider making a new list.
3. Item 3
To nest a third (or more) sublist level, you need to indent 4 extra spaces (or 1 extra tab) for each level.
1. level 1
1. Level 2
* Level 3
2. level 2
1. Level 3
2. Level 2
Horizontal Rule
A horizontal rule (or line) can be useful to break up large sections of text to improve readability.
---
Inline Code
This is my `inline code` example.
Code Block
'''
My Code Block Line 1
My Code Block Line 2
NOTE: Use ` instead of '
'''
Images
Publicly hosted images can be embedded in markdown.
Tips:
Images size:
Attempting to resize images by specifying image size information in markdown is not currently supported by the Markdown editor.
The image should be resized to the desired display width & height before saving it to a publicly hosted location.
The maximum width of an embedded image is 920px (pixels). Images larger than this width will be rendered at a maximum width of 920px. To ensure your images are optimized, we recommend resizing your images to no more than 920px wide.
When displaying images on smaller devices, images that are wider than the display width of the device will be responsively resized to 100% of the width of the device screen.
The following example and table outlines common image widths:
Image Size | Width | Height |
Thumbnail | 100px | 100px |
Small | 250px | 250px |
Medium | 500px | 500px |
Large | 920px | 920px |
Any image formatting (cropping, editing, touch-ups, etc.) should be done before saving the image to a publicly hosted location.
Images must currently be hosted in a public location. For example, on a public web server, a public Dropbox link, Google Drive link, OneDrive link, etc. These links must also directly reference the image file and not a "preview page" of the image. Click here to learn more about embedding images from cloud-hosted providers.
To ensure your image is accessible, be sure to supply the
[Sample Alt Text]to ensure Alt Text is displayed for those needing assistive devices like screen readers.Looking for a tool to help you resize your images easily? You can use the free Image Resizer Tool from Adobe. In a few short steps you can resize any image to any size for Social Media, Print, Web, and more. It's easy as 1, 2, 3:
Upload your image.
Choose a size from the available templates or use your own sizing.
Download your resized image and use it!
Linked Images
To link an image to a website URL, use the following markdown syntax:
[](link_url)
Be sure to use the markdown editor view </> when editing this markdown.
To ensure your linked image is accessible, be sure to supply the [Sample Alt Text] to ensure Alt Text is displayed for those needing assistive devices like screen readers.
Aligning Text
The markdown syntax does not officially support text alignment (🙄) but there is a trick you can use to set the text alignment if needed:
To set text-alignment manually:
In any rich-text field (for example, Event Setup section > General tab > Summary field), click the
</>toolbar button to switch to the "markdown" (code) view.Next, wrap all the current text in a Paragraph HTML tag like so:
<p style="text-align: left">YOUR SUMMARY HERE</p>
Click the Save button to save your changes.
Go to your Event Portal and refresh the Home page. you'll now see that your text is now left-aligned. Yay!!!
Text Color
Changing the text color is not supported directly in the Markdown Text editor. This helps to ensure text is consistently formatted and adheres to modern web accessibility standards. That said, it is still possible to manually set the color for blocks of text by embedding an HTML tag in the Markdown editor.
To set the color manually:
Change the editor mode to
markdownby clicking the markdown editor button:
Next, you must wrap the text in an HTML
<span style="color: red">...</span>tag.The following example sets the text color to red, but you may use any HTML color code:
<span style="color: red">Your Text Here...</span>
Lastly, Save your changes to apply the color.
Full Markdown Syntax
ClearEvent supports a specific flavor of Markdown called CommonMark. The full syntax can be found below.
NOTE: This is a technical specification.