"use strict";(self.__LOADABLE_LOADED_CHUNKS__=self.__LOADABLE_LOADED_CHUNKS__||[]).push([[5003],{76966:function(e,t,l){l.r(t),l.d(t,{default:function(){return i},noWrapper:function(){return m}});var a=l(74993),n=l(94159),r=l(76555),o=l(80338);const c=()=>n.createElement("div",{className:"prose prose-stone prose-code:before:content-[''] prose-code:after:content-['']"},n.createElement("div",{className:"flex flex-col"},n.createElement("table",{className:"cohost-shadow-light dark:cohost-shadow-dark w-full table-auto overflow-hidden rounded-lg bg-notWhite"},n.createElement("thead",{className:"mx-auto bg-longan font-league"},n.createElement("tr",null,n.createElement("th",{className:"p-3 font-league text-xl font-semibold leading-6 tracking-tighter",colSpan:2},"markdown cheatsheet"))),n.createElement("tbody",{className:"bg-notWhite"},n.createElement("tr",{className:"border-b border-longan"},n.createElement("td",{className:"px-3",colSpan:2},"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.")),n.createElement("tr",{className:"border-b border-longan"},n.createElement("td",{className:"px-3 font-bold"},"paragraphs"),n.createElement("td",null,"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.")),n.createElement("tr",{className:"border-b border-longan"},n.createElement("td",{className:"px-3 font-bold"},"heading"),n.createElement("td",null,n.createElement("code",null,"# heading 1 ",n.createElement("br",null)," ## heading 2 ",n.createElement("br",null)," ### heading 3"))),n.createElement("tr",{className:"border-b border-longan "},n.createElement("td",{className:"px-3 font-bold"},"italic"),n.createElement("td",null,n.createElement("code",null,"*italic text*"))),n.createElement("tr",{className:" border-b border-longan"},n.createElement("td",{className:" px-3 font-bold"},"bold"),n.createElement("td",null,n.createElement("code",null,"**bold text**"))),n.createElement("tr",{className:"border-b border-longan"},n.createElement("td",{className:" px-3 font-bold"},"bold and italic"),n.createElement("td",null,n.createElement("code",null,"***bold and italic text***"))),n.createElement("tr",{className:"border-b border-longan"},n.createElement("td",{className:" px-3 font-bold"},"blockquote"),n.createElement("td",null,n.createElement("code",null,"> blockquote ",n.createElement("br",null)," >> nested blockquote"))),n.createElement("tr",{className:"border-b border-longan "},n.createElement("td",{className:"px-3 font-bold"},"strikethrough"),n.createElement("td",null,n.createElement("code",null,"~~strikethrough~~"))),n.createElement("tr",{className:"border-b border-longan "},n.createElement("td",{className:"px-3 font-bold"},"code"),n.createElement("td",null,n.createElement("code",null,"`code`"))),n.createElement("tr",{className:"border-b border-longan "},n.createElement("td",{className:"px-3 font-bold"},"ordered list"),n.createElement("td",null,n.createElement("code",null,"1. list item ",n.createElement("br",null)," 2. list item ",n.createElement("br",null),"3. list item"))),n.createElement("tr",{className:"border-b border-longan "},n.createElement("td",{className:"px-3 font-bold"},"unordered list"),n.createElement("td",null,n.createElement("code",null,"- egg ",n.createElement("br",null)," - bug ",n.createElement("br",null)," - eggbug"))),n.createElement("tr",{className:"border-b border-longan "},n.createElement("td",{className:"px-3 font-bold"},"link"),n.createElement("td",null,n.createElement("code",null,"[link text](http://www.example.com)"))),n.createElement("tr",{className:"border-b border-longan "},n.createElement("td",{className:"px-3 font-bold"},"image"),n.createElement("td",null,n.createElement("code",null,"![alt text](imagename.jpg)"))),n.createElement("tr",{className:"border-b border-longan"},n.createElement("td",{className:"px-3 font-bold"},"line break"),n.createElement("td",null,n.createElement("code",null,"<br />"),", or leave two spaces at the end of a line")),n.createElement("tr",{className:"border-b border-longan"},n.createElement("td",{className:"px-3 font-bold"},"disable link preview"),n.createElement("td",null,"wrap the URL in angle brackets",n.createElement("br",null),n.createElement("code",null,"<https://www.youtube.com/watch?v=dQw4w9WgXcQ>"))),n.createElement("tr",null,n.createElement("td",{className:"px-3 font-bold"},"footnotes"),n.createElement("td",null,n.createElement("code",null,n.createElement("div",null,"a sentence with one footnote,[^1] then a second.[^2]"),n.createElement("div",null,"[^1]: the note text you want to appear at the bottom of the post"),n.createElement("div",null,"[^2]: the second note text you want to appear")))),n.createElement("tr",null,n.createElement("td",{className:"px-3 font-bold"},"highlighting"),n.createElement("td",null,n.createElement("code",null,"<mark>this text will be highlighted in yellow</mark>"))),n.createElement("tr",null,n.createElement("td",{className:"px-3 font-bold"},"subscript"),n.createElement("td",null,n.createElement("code",null,"<sub>this text will appear as subscript</sub>"))),n.createElement("tr",null,n.createElement("td",{className:"px-3 font-bold"},"superscript"),n.createElement("td",null,n.createElement("code",null,"<sup>this text will appear as superscript</sup>"))),n.createElement("tr",null,n.createElement("td",{className:"px-3 font-bold"},"read more"),n.createElement("td",null,n.createElement("br",null),n.createElement("code",null,"---"),n.createElement("br",null),n.createElement("br",null),"make sure to leave an empty line before and after the dashes!")),n.createElement("tr",null,n.createElement("td",{className:"px-3 font-bold"},"preformatted text"),n.createElement("td",null,n.createElement("pre",{className:"mr-3"},n.createElement("code",null,"```",n.createElement("br",null),"place text between two rows of triple backticks (the ` character, as",n.createElement("br",null),"seen above and below) to write preformatted text. this will prevent",n.createElement("br",null),"any symbols inside from being interpreted as markdown or html. it",n.createElement("br",null),"will be displayed exactly as you type it, in a monospace font, with a",n.createElement("br",null),"different color background. this is great for displaying code!",n.createElement("br",null),"```")))),n.createElement("tr",null,n.createElement("td",{className:"px-3 font-bold"},"tables"),n.createElement("td",null,"tables are bit too complex for a cheatsheet, but you can read about them"," ",n.createElement("a",{href:"https://www.markdownguide.org/extended-syntax/#tables",target:"_blank",rel:"noreferrer"},"here"))))),n.createElement("table",{className:"cohost-shadow-light dark:cohost-shadow-dark w-full table-auto overflow-hidden rounded-lg bg-notWhite"},n.createElement("thead",{className:"mx-auto bg-longan font-league"},n.createElement("tr",null,n.createElement("th",{className:"p-3 font-league text-xl font-semibold leading-6 tracking-tighter"},"embedding images"))),n.createElement("tbody",{className:"bg-notWhite"},n.createElement("tr",{className:"border-b border-longan"},n.createElement("td",{className:"px-3"},"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:",n.createElement("ol",null,n.createElement("li",null,n.createElement("b",null,"attach the image to your post")," as if you were going to include it at the top."),n.createElement("li",null,n.createElement("b",null,"save the post as a draft")," to finish uploading the image."),n.createElement("li",null,n.createElement("b",null,"go to your drafts page and retrieve the URL for the image")," ","from that draft that you want to embed in your post. you can do this by right-clicking and opening the image in a new tab or inspecting the HTML element with the image."),n.createElement("li",null,n.createElement("b",null,"edit the draft and use this URL for the image to embed it")," ","into your post, either with the markdown image syntax (see above) or an HTML image tag (see below.) remember to set the alt text with a written description!"),n.createElement("li",null,n.createElement("b",null,"remove the image attachment")," from the top of the post.")),n.createElement("b",null,"be sure not to delete the draft!")," for privacy and data protection reasons, images not attached to posts are eligible for deletion at a later date. in the future, we intend to replace this method of embedding images with one that does not require you to keep these drafts around—but we're not there yet!")))),n.createElement("table",{className:"cohost-shadow-light dark:cohost-shadow-dark w-full table-auto overflow-hidden rounded-lg bg-notWhite"},n.createElement("thead",{className:"mx-auto bg-longan font-league"},n.createElement("tr",null,n.createElement("th",{className:"p-3 font-league text-xl font-semibold leading-6 tracking-tighter",colSpan:2},"HTML"))),n.createElement("tbody",{className:"bg-notWhite"},n.createElement("tr",{className:"border-b border-longan"},n.createElement("td",{className:"px-3",colSpan:2},"while ",n.createElement("b",null,"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"," ",n.createElement("a",{href:"https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics",target:"_blank",rel:"noreferrer"},"MDN HTML Basics page")," ","is a good place to start.",n.createElement("br",null),n.createElement("br",null),n.createElement("em",null,"if you just want code snippets you can copy and paste, skip down to"," ",n.createElement("b",null,n.createElement("a",{href:"#snippets"},"common formatting & code snippets")),"."))),n.createElement("tr",{className:"border-b border-longan"},n.createElement("td",{className:"px-3 text-lg font-semibold",colSpan:2},"HTML glossary")),n.createElement("tr",{className:"border-b border-longan"},n.createElement("td",{className:"px-3 font-bold"},n.createElement("b",null,"HTML element")),n.createElement("td",null,"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.")),n.createElement("tr",{className:"border-b border-longan"},n.createElement("td",{className:"px-3 font-bold"},n.createElement("b",null,"HTML tag")),n.createElement("td",{className:"max-w-prose"},"a tag is a piece of code that begins an HTML element. they are always wrapped in angle brackets, aka ",n.createElement("code",null,"<")," and ",n.createElement("code",null,">"),". some elements use opening and closing tags, and these elements can have children. closing tags start with"," ",n.createElement("code",null,"</"),". some specific elements do not need a closing tag, and these tags end in"," ",n.createElement("code",null,"/>"),".",n.createElement("br",null),n.createElement("br",null),n.createElement("em",null,"an HTML element for a paragraph, with an opening tag and closing tag:"),n.createElement("div",{className:"mr-3"},n.createElement(r.Z,{language:"html",style:o.Z},"<p>this text is inside the paragraph</p>")),n.createElement("em",null,"an HTML element for an image, which does not need a closing tag and cannot end, but should end in ",n.createElement("code",null,"/>"),":"),n.createElement("div",{className:"mr-3"},n.createElement(r.Z,{language:"html",style:o.Z},'<img src="https://staging.cohostcdn.org/attachment/d285e796-4c02-4cf8-90ee-18d0867949e5/speedbug.png"\n     alt="PUT YOUR ALT TEXT HERE" />')))),n.createElement("tr",{className:"border-b border-longan"},n.createElement("td",{className:"px-3 font-bold"},n.createElement("b",null,"HTML attribute")),n.createElement("td",{className:"max-w-prose"},"an attribute is additional information contained within an HTML tag. you saw two attributes in the example ",n.createElement("code",null,"img")," tag above—",n.createElement("code",null,"src")," ","and ",n.createElement("code",null,"alt"),". some tags require attributes to work. an attribute starts with a name (like"," ",n.createElement("code",null,"alt"),") followed by ",n.createElement("code",null,"=")," then the value of the attribute within a pair of"," ",n.createElement("code",null,'"'),". so, in the example below,"," ",n.createElement("code",null,"style")," is the attribute name, and"," ",n.createElement("code",null,"color: red;")," is the attribute value for the ",n.createElement("code",null,"style")," attribute:",n.createElement("div",{className:"mr-3"},n.createElement(r.Z,{language:"html",style:o.Z},'<p style="color: red;">i will be red!</p>')))),n.createElement("tr",{className:"border-b border-longan"},n.createElement("td",{className:"px-3 text-lg font-semibold",colSpan:2},"combining markdown and HTML")),n.createElement("tr",{className:"border-b border-longan"},n.createElement("td",{className:"px-3",colSpan:2},"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"," ",n.createElement("em",null,"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.",n.createElement("br",null),n.createElement("br",null),"you ",n.createElement("em",null,"can")," use markdown in the same post that you use HTML tags, as long as the markdown is outside of any HTML tag.",n.createElement("br",null),n.createElement("strong",null,"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.")))),n.createElement("table",{className:"cohost-shadow-light dark:cohost-shadow-dark w-prose table-auto overflow-hidden rounded-lg bg-notWhite"},n.createElement("thead",{className:"mx-auto bg-longan font-league"},n.createElement("tr",null,n.createElement("th",{className:"p-3 font-league text-xl font-semibold leading-6 tracking-tighter",colSpan:2},"CSS"))),n.createElement("tbody",{className:"bg-notWhite"},n.createElement("tr",{className:"border-b border-longan"},n.createElement("td",{className:"max-w-prose px-3",colSpan:2},"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 ",n.createElement("code",null,"color")," property to the property value ",n.createElement("code",null,"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.",n.createElement("br",null),n.createElement("br",null),n.createElement("b",null,"however, as a cohost user,"," ",n.createElement("em",null,"you cannot make your own stylesheets"),", and must write all CSS via",n.createElement("em",null,"“inline CSS.”")," this is a common source of confusion when trying to read CSS tutorials in order to format your coposts."),n.createElement("br",null),n.createElement("br",null),"to write inline CSS, put all of your CSS code within the ",n.createElement("code",null,"style")," attribute of the HTML element you want to format. it's good practice to end each property/value pair with ",n.createElement("code",null,";")," and it's required to do so to put multiple properties in one HTML ",n.createElement("code",null,"style")," attribute.",n.createElement("br",null),n.createElement("br",null),n.createElement("em",null,"for example:"),n.createElement("div",{className:"mr-3"},n.createElement(r.Z,{language:"html",style:o.Z},'<p style="color: red;">this text will be red</p>\n\n<p style="color: blue; font-size: 16px; font-weight: bold;">\n\tthis text will be blue, 16px large, and bold\n</p>')))))),n.createElement("table",{id:"snippets",className:"cohost-shadow-light dark:cohost-shadow-dark w-prose table-auto overflow-hidden rounded-lg bg-notWhite"},n.createElement("thead",{className:"mx-auto bg-longan font-league"},n.createElement("tr",null,n.createElement("th",{className:"p-3 font-league text-xl font-semibold leading-6 tracking-tighter",colSpan:2},"common formatting & code snippets"))),n.createElement("tbody",{className:"bg-notWhite"},n.createElement("tr",{className:"border-b border-longan"},n.createElement("td",{className:"max-w-prose px-3",colSpan:2},"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.")),n.createElement("tr",{className:"border-b border-longan"},n.createElement("td",{className:"px-3 font-bold"},n.createElement("b",null,"centering or aligning text")),n.createElement("td",{className:"max-w-prose"},"to align text, create an HTML element by wrapping it in a ",n.createElement("code",null,"<div>"),","," ",n.createElement("code",null,"<span>"),", ",n.createElement("code",null,"<p>"),", or another similar tag, and add the"," ",n.createElement("code",null,"style")," attribute to that element (which allows you to add inline CSS) and make sure that attribute sets the CSS property"," ",n.createElement("code",null,"text-align"),". use"," ",n.createElement("code",null,"text-align: center")," to horizontally center text, and ",n.createElement("code",null,"text-align: right")," to right-align it. by default, text will be left-aligned.",n.createElement("br",null),n.createElement("br",null),n.createElement("em",null,"you can copy and paste this code and replace “eggbug” with the text you want to center:"),n.createElement("div",{className:"mr-3"},n.createElement(r.Z,{language:"html",style:o.Z},'<div style="text-align: center;">eggbug!</div>')),"you may run into issues if this element is nested within other elements with different alignments or sizes. if you are new to HTML and CSS, you may want to avoid nesting elements when possible!")),n.createElement("tr",{className:"border-b border-longan"},n.createElement("td",{className:"px-3 font-bold"},n.createElement("b",null,"centering images and other HTML elements")),n.createElement("td",{className:"max-w-prose"},"there are two steps to horizontally centering images or other HTML elements:",n.createElement("ol",null,n.createElement("li",null,"create a parent element (such as a"," ",n.createElement("code",null,"<div>"),") with a"," ",n.createElement("code",null,"width")," attribute with the size you want to center within. often this is"," ",n.createElement("code",null,'width="100%"'),"."),n.createElement("li",null,"create a child element of that parent element with a ",n.createElement("code",null,"style")," of"," ",n.createElement("code",null,"margin: 0px auto"))),n.createElement("em",null,"you can copy and paste this code to make an image and horizontally center it within 100% of the available space, replacing the URL with the URL of your image:"),n.createElement("div",{className:"mr-3"},n.createElement(r.Z,{language:"html",style:o.Z},'<div width=100%>\n  <img style="margin: 0px auto;"\n       src="https://staging.cohostcdn.org/attachment/d285e796-4c02-4cf8-90ee-18d0867949e5/speedbug.png"\n       alt="PUT YOUR ALT TEXT HERE" />\n</div>')),"you may run into issues if this element is nested within other elements with different alignments or sizes. if you are new to HTML and CSS, you may want to avoid nesting elements more deeply than the example above!")),n.createElement("tr",{className:"border-b border-longan"},n.createElement("td",{className:"px-3 font-bold"},n.createElement("b",null,"collapsible text")),n.createElement("td",{className:"max-w-prose"},"to create a piece of collapsible text in your post that users can open or close, use the"," ",n.createElement("code",null,"<details>")," HTML element. inside the ",n.createElement("code",null,"<details>")," element, put the text you want to collapse, and a"," ",n.createElement("code",null,"<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.",n.createElement("br",null),n.createElement("br",null),n.createElement("em",null,"you can copy and paste this code, and replace the summary and inside text with your own:"),n.createElement("div",{className:"mr-3"},n.createElement(r.Z,{language:"html",style:o.Z},"<details>\n\t<summary>Closed Text/Header</summary>\n\tThis text here will not show until the user clicks on the element\n</details>")))))),n.createElement("table",{className:"cohost-shadow-light dark:cohost-shadow-dark w-full table-auto overflow-hidden rounded-lg bg-notWhite"},n.createElement("thead",{className:"mx-auto bg-longan font-league"},n.createElement("tr",null,n.createElement("th",{className:"p-3 font-league text-xl font-semibold leading-6 tracking-tighter"},"cohost-specific HTML & CSS rules"))),n.createElement("tbody",{className:"bg-notWhite"},n.createElement("tr",{className:"border-b border-longan"},n.createElement("td",{className:"px-3"},"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:",n.createElement("ol",null,n.createElement("li",null,n.createElement("p",null,"you cannot use the CSS property"," ",n.createElement("code",null,"position: fixed"))),n.createElement("li",null,n.createElement("p",null,"you cannot use the"," ",n.createElement("code",null,"<style>")," tag")),n.createElement("li",null,n.createElement("p",null,"you cannot make functional HTML forms")),n.createElement("li",null,n.createElement("p",null,"you cannot use CSS custom properties/custom variables")),n.createElement("li",null,n.createElement("p",null,"HTML ID attributes may be modified and should not be relied on"))),"additionally, it may be helpful to know that the CSS property ",n.createElement("code",null,"isolation: isolate")," applies to all coposts, which affects how ",n.createElement("code",null,"z-index")," ","behaves."," ",n.createElement("a",{href:"https://developer.mozilla.org/en-US/docs/Web/CSS/isolation",target:"_blank",rel:"noreferrer"},"read more about the ",n.createElement("code",null,"isolation")," ","property on MDN"),".")),n.createElement("tr",{className:"border-b border-longan"},n.createElement("td",{className:"px-3"},"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:",n.createElement("br",null),n.createElement("br",null),n.createElement("code",null,n.createElement("ol",null,n.createElement("li",null,"--color-cherry"),n.createElement("li",null,"--color-mango"),n.createElement("li",null,"--color-strawberry"),n.createElement("li",null,"--color-longan"),n.createElement("li",null,"--color-notWhite"),n.createElement("li",null,"--color-notBlack"))),n.createElement("br",null),"you can use these colors by wrapping them in"," ",n.createElement("code",null,"rgb(var()))"),".",n.createElement("br",null),n.createElement("br",null),n.createElement("em",null,"for example:"),n.createElement("div",{className:"mr-3"},n.createElement(r.Z,{language:"html",style:o.Z},'<p style="color: rgb(var(--color-cherry));">i will be cherry!</p>')),n.createElement("br",null),"however, the HTML classes and related CSS styles used for implementing cohost itself are ",n.createElement("em",null,"not")," ","a supported, stable API and may change at any time. use them at your own risk.")))),n.createElement("table",{className:"cohost-shadow-light dark:cohost-shadow-dark w-full table-auto overflow-hidden rounded-lg bg-notWhite"},n.createElement("thead",{className:"mx-auto bg-longan font-league"},n.createElement("tr",null,n.createElement("th",{className:"p-3 font-league text-xl font-semibold leading-6 tracking-tighter"},"learn more about writing HTML & CSS on cohost"))),n.createElement("tbody",{className:"bg-notWhite"},n.createElement("tr",{className:"border-b border-longan"},n.createElement("td",{className:"px-3"},"if you’d like to learn more than this cheatsheet can teach you, cohost user"," ",n.createElement("a",{href:"https://cohost.org/lexyeevee",target:"_blank",rel:"noreferrer"},"@lexyeevee")," ","has written an excellent multi-part introduction to HTML and CSS for “goofing around on cohost” which you can find"," ",n.createElement("a",{href:"https://cohost.org/lexyeevee/post/495441-css-for-css-baby-1",target:"_blank",rel:"noreferrer"},"here"),". you can also use"," ",n.createElement("a",{href:"https://cloudwithlightning.net/random/chostin/prechoster",target:"_blank",rel:"noreferrer"},"prechoster")," ","by"," ",n.createElement("a",{href:"https://cohost.org/blep/post/323847-prechoster",target:"_blank",rel:"noreferrer"},"@blep")," ","to write and test your cohost HTML and CSS before posting."))))));var s=l(90275);const m=!0;var i=function(e={}){const{wrapper:t}=e.components||{};return t?(0,a.jsx)(t,Object.assign({},e,{children:(0,a.jsx)(l,{})})):l();function l(){return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(s.ql,{title:"markdown cheatsheet"}),"\n","\n",(0,a.jsx)(c,{})]})}}}}]);
//# sourceMappingURL=client-preact-components-pages-static-markdown-reference-mdx.2e538035a52b5a52ecdb.js.map