markdown cheatsheet | |
---|---|
markdown is a simple way to format text using only basic characters on your keyboard. while markdown comes in many flavors, this page lists markdown symbols that work on cohost. | |
paragraphs | to separate text into paragraphs, leave an empty line between two blocks of text. if you do not leave an empty line between them, pressing enter once will still cause both blocks to be combined onto one line. |
heading | # heading 1 |
italic | *italic text* |
bold | **bold text** |
bold and italic | ***bold and italic text*** |
blockquote | > blockquote |
strikethrough | ~~strikethrough~~ |
code | `code` |
ordered list | 1. list item |
unordered list | - egg |
link | [link text](http://www.example.com) |
image | ![alt text](imagename.jpg) |
line break | <br /> , or leave two spaces at the end of a line |
disable link preview | wrap the URL in angle brackets<https://www.youtube.com/watch?v=dQw4w9WgXcQ> |
footnotes |
|
highlighting | <mark>this text will be highlighted in yellow</mark> |
subscript | <sub>this text will appear as subscript</sub> |
superscript | <sup>this text will appear as superscript</sup> |
read more | --- make sure to leave an empty line before and after the dashes! |
preformatted text |
|
tables | tables are bit too complex for a cheatsheet, but you can read about them here |
embedding images |
---|
for now, if you want to upload an image to cohost and embed it within your post—rather than at the top of your post—there are a few steps necessary:
|
HTML | |
---|---|
while this cheatsheet will not teach you HTML, here are some basic terms and useful facts about HTML that will help you understand the instructions cheatsheet. if you’re interested in learning HTML, the MDN HTML Basics page is a good place to start. if you just want code snippets you can copy and paste, skip down to common formatting & code snippets. | |
HTML glossary | |
HTML element | the basic unit of HTML, a paragraph, an image, or a table are all examples of an HTML element. HTML elements can also have “children”, which are other HTML elements contained inside of them. |
HTML tag | a tag is a piece of code that begins an HTML element. they are always wrapped in angle brackets, aka < and > . some elements use opening and closing tags, and these elements can have children. closing tags start with </ . some specific elements do not need a closing tag, and these tags end in /> .an HTML element for a paragraph, with an opening tag and closing tag:
/> :
|
HTML attribute | an attribute is additional information contained within an HTML tag. you saw two attributes in the example img tag above—src and alt . some tags require attributes to work. an attribute starts with a name (like alt ) followed by = then the value of the attribute within a pair of " . so, in the example below, style is the attribute name, and color: red; is the attribute value for the style attribute:
|
combining markdown and HTML | |
in most cases, once you open an HTML tag, anything inside that tag will be processed like HTML. you can write text inside no problem, or nest other HTML elements, but you cannot use markdown inside an HTML element.it won’t cause a bug, but the text inside the HTML element will not be rendered as markdown. you can use markdown in the same post that you use HTML tags, as long as the markdown is outside of any HTML tag. note: one bug in embedded HTML handling is how we handle line breaks. if the starting tag of an HTML block is on the same line as text contained in it, line breaks inside the block will be preserved, instead of collapsed. |
CSS | |
---|---|
most formatting of HTML elements is done with a different language known as CSS. CSS consists primarily of “properties”, which specify what type of formatting you are trying to change, and “property values”, which let you specify how that formatting will appear. for example, to get red text, you would set the color property to the property value red . we will see the syntax for setting properties below. when making your own website, you will often make a separate CSS file, known as a “stylesheet”, then apply the styles in that sheet to matching HTML elements.however, as a cohost user, you cannot make your own stylesheets, and must write all CSS via“inline CSS.” this is a common source of confusion when trying to read CSS tutorials in order to format your coposts. to write inline CSS, put all of your CSS code within the style attribute of the HTML element you want to format. it's good practice to end each property/value pair with ; and it's required to do so to put multiple properties in one HTML style attribute.for example:
|
common formatting & code snippets | |
---|---|
below are common formatting tasks that you might use HTML and CSS for, and simple code snippets that you can copy and paste to achieve this formatting. | |
centering or aligning text | to align text, create an HTML element by wrapping it in a <div> , <span> , <p> , or another similar tag, and add the style attribute to that element (which allows you to add inline CSS) and make sure that attribute sets the CSS property text-align . use text-align: center to horizontally center text, and text-align: right to right-align it. by default, text will be left-aligned.you can copy and paste this code and replace “eggbug” with the text you want to center:
|
centering images and other HTML elements | there are two steps to horizontally centering images or other HTML elements:
|
collapsible text | to create a piece of collapsible text in your post that users can open or close, use the <details> HTML element. inside the <details> element, put the text you want to collapse, and a <summary> element with the text to show when the element is closed, and at the top of the collapsible element as a header when it is open.you can copy and paste this code, and replace the summary and inside text with your own:
|
cohost-specific HTML & CSS rules |
---|
there are some ways that writing HTML and CSS for coposts differs from writing HTML and CSS for your own website. besides requiring you to use inline CSS, certain HTML are CSS features are unavailable due to security concerns. while explaining these features is beyond this cheatsheet, here is a non-comprehensive list of ways that user-defined HTML and CSS are restricted on cohost:
isolation: isolate applies to all coposts, which affects how z-index behaves. read more about the isolation property on MDN. |
additionally, the cohost code base includes a number of animations, fonts, and colors that you can use. in particular you can use the following colors:
you can use these colors by wrapping them in rgb(var())) .for example:
however, the HTML classes and related CSS styles used for implementing cohost itself are not a supported, stable API and may change at any time. use them at your own risk. |
learn more about writing HTML & CSS on cohost |
---|
if you’d like to learn more than this cheatsheet can teach you, cohost user @lexyeevee has written an excellent multi-part introduction to HTML and CSS for “goofing around on cohost” which you can find here. you can also use prechoster by @blep to write and test your cohost HTML and CSS before posting. |