{"componentChunkName":"component---src-templates-simple-markdown-js","path":"/developer-portal/markdown/","matchPath":"","result":{"data":{"markdownRemark":{"html":"

GitHub-flavored markdown example

\n

These exercises assume you have basic markdown knowledge.

\n

Create a new plain markdown page

\n

In the developer-portal folder, create a new file named plain.md.

\n

Copy/paste this content into the file (or write some of your own). And save the file.

\n
\n
\n
Copy
\n
Copied
\n
\n 
# H1\n\nBody text.\n\n## H2\n\nBody text.\n\n### H3\n\nBody text.\n\nNotice the URL in the address bar is localhost:3000/developer-portal/plain.\nThe file name maps to the URL path.\n\n[take me back to the markdown training exercise](markdown.md)
\n
\n

So now you've create a page, but how do you access it?

\n

Accessing your new content

\n

Link to it from other pages

\n

You can create a link to it.

\n

To do that, you can edit this markdown.md file and remove the back ticks around this example.

\n
\n
\n
Copy
\n
Copied
\n
\n 
[My first plain markdown page!](plain.md)
\n
\n

(And save your file.)

\n

You'll notice the terminal will output a message stating that the file changed.\nAlso, you can watch your page in the browser and notice it will update automatically.

\n

\n \n

If the image looks blurry it is related to the development server.\nRefresh your browser page and the image should load.\nIf the image is broken (does not load), it indicates the path to the image is incorrect.\nThe ./ start means starting from the current directory.\nThe ../ moves up to the parent directory.\nAnd ../../ moves up two levels.\nAnd so on.

\n

Training exercise accomplished?

\n

Let's add a video too

\n

Find a video online and copy the \"embed\" code (or use this below).

\n
\n
`, `20440706436559020000`)\"\n >\n
Copy
\n
Copied
\n
\n 
<iframe\n  width=\"560\"\n  height=\"315\"\n  src=\"https://www.youtube.com/embed/NcEHOlnAY6A\"\n  frameborder=\"0\"\n  allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\"\n  allowfullscreen\n></iframe>
\n
\n

Then paste it in the markdown and voila!

\n\n

Content reuse

\n

You can reuse content using the embed tag.

\n

Admonitions

\n
warning

Use various admonitions like this warning.

\n
INFO

info

\n
Yee-haw!

success

\n
danger

danger

\n
attention

attention

\n

Review

\n

You made a new file.\nIt ended with the .md file extension.\nThe name could be seen in the URL path in the browser bar (the full path includes any folders it is in).\nYou included images and videos on your page.

","headings":[{"value":"GitHub-flavored markdown example","depth":1},{"value":"Create a new plain markdown page","depth":2},{"value":"Accessing your new content","depth":3},{"value":"Link to it from other pages","depth":4},{"value":"Link to it from navigation","depth":4},{"value":"Add an image to your markdown page","depth":2},{"value":"Let's add a video too","depth":2},{"value":"Content reuse","depth":2},{"value":"Admonitions","depth":2},{"value":"Review","depth":2}]},"contentItem":{"data":{"lastModified":"2023-03-21T02:46:22.000Z","enableToc":null,"disableLastModified":null,"tocMaxDepth":null,"requestLogin":false}},"siteConfig":{"enableToc":false,"disableLastModified":false,"tocMaxDepth":4}},"pageContext":{"matchPath":"","id":"ce1458b1-8c44-51cf-ae5b-0ca3a666c971__redocly content/developer-portal/markdown/","seo":{"title":"Markdown example","description":"GitHub-flavored markdown example","image":"","keywords":null,"jsonLd":null,"lang":null,"siteUrl":null},"pageId":"developer-portal/markdown.md","pageBaseUrl":"/developer-portal/markdown","type":"markdown","toc":{"enable":true,"maxDepth":4,"headings":[{"depth":1,"value":"GitHub-flavored markdown example","id":"github-flavored-markdown-example"},{"depth":2,"value":"Create a new plain markdown page","id":"create-a-new-plain-markdown-page"},{"depth":3,"value":"Accessing your new content","id":"accessing-your-new-content"},{"depth":4,"value":"Link to it from other pages","id":"link-to-it-from-other-pages"},{"depth":4,"value":"Link to it from navigation","id":"link-to-it-from-navigation"},{"depth":2,"value":"Add an image to your markdown page","id":"add-an-image-to-your-markdown-page"},{"depth":2,"value":"Let's add a video too","id":"lets-add-a-video-too"},{"depth":2,"value":"Content reuse","id":"content-reuse"},{"depth":2,"value":"Admonitions","id":"admonitions"},{"depth":2,"value":"Review","id":"review"}]},"data":{"title":"Markdown example","description":"GitHub-flavored markdown example","toc":{"enable":true}},"catalogInfo":null,"link":"/developer-portal/markdown/","sidebarName":"","isLanding":false,"showPrevButton":null,"showNextButton":null,"apiVersions":null,"apiVersionId":null,"isDefaultApiVersion":null}},"staticQueryHashes":["1123603147","1302185487","1344209882","1398840060","1520077861","1975142765","2667623876","2950305614","3240152602","3743992808","561138138"]}