To make text bold, use ** before and after the word(s):
To make text italic, use *
or _
before and after the word(s):
To make text monospace (like a typewriter), use the backtick which is the `
symbol. It is usually to the left of the 1 key.
Put the text you want in square brackets [text]
followed directly by the link in parentheses (link)
:
Use #
before your text for a heading (the number of #
s correspond to the heading level - ##
means "heading 2", ###
means "heading 3", all the way up to "heading 6":
To really make text standout, use ^^
before some words:
We use ^= =
to start two columns, then ^===
to separate the text of the columns, then ^=
to signify the end of the columns:
^= = This is the left column. ^=== This is the right column. ^=
We use between 0 and four commas [,
through ,,,,
] to indicate formatting for each column. Try experimenting with them to see the different formatting available!
^= = , This is the left column. ^=== ,,, This is the right column. ^=
You have up to 12 columns you can use. So if you wanted three evenly sized columns, each one would have a width of 4. But you could also have one that is 8 and two that are 2 columns wide. This following example shows three columns of width 4. Note that there each is formatted differently using the ,
:
^= = , 4 This is the left column. ^=== ,,, 4 This is the middle column. ^=== ,,,, 4 This is the right column. ^=
You can use ^=^
to start a standalone box and ^=
to indicate the end of a standalone box. It can be decorated with commas (up to 4) as well as one number (up to 12) that indicates how many of the 12 columns the box will span.
^=^ ,, 8 Contents of a standalone box. ^=
Just use *
to indicate a bulleted list item! You can have multiple lines of bulleted items. If you'd like to have indented sub-lists, use two spaces:
* item one * item two * item three * item three a * item three b * another indent * item four
Start the list off with 1.
and sequentially number each item. To have a sub-list, use two spaces to indent.
1. Stuff 2. More stuff 1. sub stuff 2. more sub stuff 3. More stuff 5. The end of the list
Every callout needs a beginning ^callout
and an ending ^callout-end
. Note that you can, at the beginning of a callout, use some special icons, too!
^callout some text. some more text. ^callout-end
When you start a callout try adding an icon code! This example will create an icon for "download" ^callout download
. You can experiment with other ones, too.
question-circle
info-circle
b-google-drive
book
comment
backward
comments
external-link-alt
You can check out this link for a complete listing.
^callout download some text. some more text. ^callout-end
To make an accordion, you need to specify the start (^acc
) and end (^acc-end
) of the accordion block as well as each heading (^^^ text
). Note that in the markdown editor every section will be expanded, but once you paste into Brightspace everything will behave as expected:
^acc ^^^ First item any text you want. ^^^ Second item any text you want. ^^^ Another item any text you want. ^acc-end
To make tabs, you'll start with ^tabs
followed by each tab title separated by a comma. Then, go right into the first tab content. Use ^tab
to indicate the next tab contents.
^tabs AAA, BBB, CCC text to go with AAA ^tab text to go with BBB ^tab text to go with CCC ^tabs-end
Use ^youtube
followed by the embed code provided by YouTube in the video you want to embed (from the share menu)
^youtube <iframe width="560" height="315" src="https://www.youtube.com/embed/ETBZwtH3fbU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen>
You can use sweet icons in your design by using *^icon users*
(besides users there are tons of other icons you can use, too. Check out FontAwesome for all sorts of cool icons. Note that some icons (mostly businesses) might require a b-
to be inserted before the icon name. See the example below.
*^icon users* *^icon upload* *^icon universal-access* *^icon university* *^icon calendar* *^icon book-open* *^icon book* *^icon b-google-drive* *^icon b-microsoft* *^icon b-apple*
Similar to icons, you should use *^key ctrl*
to indicate a key (you can replace ctrl with any text).
*^key enter* *^key ctrl* *^key ctrl*-*^key c* *^key ctrl*-*^key v* *^key esc*
You can use ![alt description](URL of image)
to include an image. You can also use ^+
to indicate the image should be to the right, ^-
to indicate the image should be to the left, and ^o
to round the image.
You can also combine them, so ^-o
would put the image to the left and also provide rounded corners and ^+o
would force the image to the right and round the corners.
There are examples of each in the sample below.
![Image of a doggo](https://loremflickr.com/200/200/dog)Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sit amet lectus magna. Aenean ut diam ullamcorper, viverra orci ac, commodo diam. Curabitur fringilla facilisis nunc a sollicitudin. Quisque sit amet metus hendrerit, lacinia tortor in, vehicula felis. Integer sollicitudin consectetur mattis. Maecenas a blandit nunc, rhoncus bibendum quam. Praesent in enim id magna vehicula lacinia tempor vel orci. Mauris non dui nunc. Donec nec semper ligula, sed placerat nulla. In venenatis, tellus quis hendrerit iaculis, nisl turpis tempor felis, quis sollicitudin justo massa a justo. Praesent rutrum libero vel vulputate ultricies. Duis sit amet aliquam dui, tempus maximus risus. Nullam ullamcorper dictum massa, quis sollicitudin velit. Sed tempor tincidunt turpis, vel porttitor risus mattis vel. ![^-Image of a doggo](https://loremflickr.com/200/200/dog)Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sit amet lectus magna. Aenean ut diam ullamcorper, viverra orci ac, commodo diam. Curabitur fringilla facilisis nunc a sollicitudin. Quisque sit amet metus hendrerit, lacinia tortor in, vehicula felis. Integer sollicitudin consectetur mattis. Maecenas a blandit nunc, rhoncus bibendum quam. Praesent in enim id magna vehicula lacinia tempor vel orci. Mauris non dui nunc. Donec nec semper ligula, sed placerat nulla. In venenatis, tellus quis hendrerit iaculis, nisl turpis tempor felis, quis sollicitudin justo massa a justo. Praesent rutrum libero vel vulputate ultricies. Duis sit amet aliquam dui, tempus maximus risus. Nullam ullamcorper dictum massa, quis sollicitudin velit. Sed tempor tincidunt turpis, vel porttitor risus mattis vel. ![^+Image of a doggo](https://loremflickr.com/200/200/dog)Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sit amet lectus magna. Aenean ut diam ullamcorper, viverra orci ac, commodo diam. Curabitur fringilla facilisis nunc a sollicitudin. Quisque sit amet metus hendrerit, lacinia tortor in, vehicula felis. Integer sollicitudin consectetur mattis. Maecenas a blandit nunc, rhoncus bibendum quam. Praesent in enim id magna vehicula lacinia tempor vel orci. Mauris non dui nunc. Donec nec semper ligula, sed placerat nulla. In venenatis, tellus quis hendrerit iaculis, nisl turpis tempor felis, quis sollicitudin justo massa a justo. Praesent rutrum libero vel vulputate ultricies. Duis sit amet aliquam dui, tempus maximus risus. Nullam ullamcorper dictum massa, quis sollicitudin velit. Sed tempor tincidunt turpis, vel porttitor risus mattis vel. ![^oImage of a doggo](https://loremflickr.com/200/200/dog)Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sit amet lectus magna. Aenean ut diam ullamcorper, viverra orci ac, commodo diam. Curabitur fringilla facilisis nunc a sollicitudin. Quisque sit amet metus hendrerit, lacinia tortor in, vehicula felis. Integer sollicitudin consectetur mattis. Maecenas a blandit nunc, rhoncus bibendum quam. Praesent in enim id magna vehicula lacinia tempor vel orci. Mauris non dui nunc. Donec nec semper ligula, sed placerat nulla. In venenatis, tellus quis hendrerit iaculis, nisl turpis tempor felis, quis sollicitudin justo massa a justo. Praesent rutrum libero vel vulputate ultricies. Duis sit amet aliquam dui, tempus maximus risus. Nullam ullamcorper dictum massa, quis sollicitudin velit. Sed tempor tincidunt turpis, vel porttitor risus mattis vel. ![^-oImage of a doggo](https://loremflickr.com/200/200/dog)Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sit amet lectus magna. Aenean ut diam ullamcorper, viverra orci ac, commodo diam. Curabitur fringilla facilisis nunc a sollicitudin. Quisque sit amet metus hendrerit, lacinia tortor in, vehicula felis. Integer sollicitudin consectetur mattis. Maecenas a blandit nunc, rhoncus bibendum quam. Praesent in enim id magna vehicula lacinia tempor vel orci. Mauris non dui nunc. Donec nec semper ligula, sed placerat nulla. In venenatis, tellus quis hendrerit iaculis, nisl turpis tempor felis, quis sollicitudin justo massa a justo. Praesent rutrum libero vel vulputate ultricies. Duis sit amet aliquam dui, tempus maximus risus. Nullam ullamcorper dictum massa, quis sollicitudin velit. Sed tempor tincidunt turpis, vel porttitor risus mattis vel. ![^+oImage of a doggo](https://loremflickr.com/200/200/dog)Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sit amet lectus magna. Aenean ut diam ullamcorper, viverra orci ac, commodo diam. Curabitur fringilla facilisis nunc a sollicitudin. Quisque sit amet metus hendrerit, lacinia tortor in, vehicula felis. Integer sollicitudin consectetur mattis. Maecenas a blandit nunc, rhoncus bibendum quam. Praesent in enim id magna vehicula lacinia tempor vel orci. Mauris non dui nunc. Donec nec semper ligula, sed placerat nulla. In venenatis, tellus quis hendrerit iaculis, nisl turpis tempor felis, quis sollicitudin justo massa a justo. Praesent rutrum libero vel vulputate ultricies. Duis sit amet aliquam dui, tempus maximus risus. Nullam ullamcorper dictum massa, quis sollicitudin velit. Sed tempor tincidunt turpis, vel porttitor risus mattis vel.
As long as you have an image in your Google Drive shared such that "Anyone with the link can view", you can replace the document ID in the example below with the document ID of your own image. You can also use google-thumb
instead of google
to see a thumbnail. Just like images from a URL, you can use the ^+
, ^-
, and ^o
to format the image.
![FLCC Logo](google:https://drive.google.com/file/d/1b_U8YYO500-voU8MGsseRyDMg_mzskDt/view?usp=share_link) ![^-FLCC Logo](google-thumb:https://docs.google.com/drawings/d/1b_U8YYO500-voU8MGsseRyDMg_mzskDt/edit?usp=sharing)
Use the template below. Note that they hyphens and colons signify the alignment. If the colon is on the left side only, the text will be left aligned. Right side only, right aligned. Both the left and the right, centered! The number of hypens doesn't really matter but they do help to visualize the table structure.
|Class |Return |Status | |:----:|--------:|:-------| | A | $5.00| final | | C | $1012.00| ongoing| |Name |Grade |Overall GPA |Year |:-------:|--------:|:-----------|:--- | Bart | 36% | 1.2 | 4 | Lisa | 100% | 4.4. | 3 | Maggie | N/A. | N/A. | K
The instructions are the same as a regular table except you add the caption directly at the end of the table - in fact, there isn't even the final |
in the table; instead use ^cap class return comparison^
.
|Class |Return |Status | |:----:|--------:|:-------| | A | $5.00| final | | C | $1012.00| ongoing ^cap class return comparison^
You can make your own color scheme! You need to know the hex codes for three things - the main theme color, the text color, and the color of hyperlinks.
^colors bg:#1e90ff text:#eeeeee link:#ccccff
You can use the HTML code for line break <br />
<br />
You can use three dashes to insert a horizontal rule ---
some words --- even more words
You'll need to use HTML to change the color of specific words. You can use "SPAN" property: <span style="color: red;">Whatever text</span>
. You can either use the color name or the hex code - but be sure to include the # in front of the number (#1e90ff
, for instance)
Some text <span style="color: red;">Whatever text</span> some more text
If you'd like to have multiple spaces in your text, you can't just add more spaces with the space bar. Instead, use the HTML code for a "non-breaking space".
some words some more words