<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
<nav id="navbar">
<header>Mark-Down Documentation</header>
<ul id="nav-link-wrapper">
<li><a class="nav-link" href="#Introduction">Introduction</a></li>
<li><a class="nav-link" href="#How_does_it_work">How does it work</a></li>
<li><a class="nav-link" href="#Headings">Headings</a></li>
<li><a class="nav-link" href="#Bold">Bold</a></li>
<li><a class="nav-link" href="#Italic">Italic</a></li>
<li><a class="nav-link" href="#Paragraphs">Paragraphs</a></li>
<li><a class="nav-link" href="#Unordered_list">Unordered list</a></li>
<li><a class="nav-link" href="#Blockquotes">Blockquotes</a></li>
<li><a class="nav-link" href="#Reference">Reference</a></li>
</ul>
</nav>
<main id="main-doc">
<section class="main-section" id="Introduction">
<header>Introduction</header>
<article>
<p>
Markdown is a lightweight markup language that you can use to add formatting elements to plaintext text documents. Created by John Gruber in 2004, Markdown is now one of the world’s most popular markup languages. <br> Using Markdown is different
than using a WYSIWYG editor. In an application like Microsoft Word, you click buttons to format words and phrases, and the changes are visible immediately. Markdown isn’t like that. When you create a Markdown-formatted file, you add Markdown syntax
to the text to indicate which words and phrases should look different.
</p>
</article>
</section>
<section class="main-section" id="How_does_it_work">
<header>How does it work</header>
<article class="how_does_it_work_article">
<p>
Markdown applications use something called a Markdown processor (also commonly referred to as a “parser” or an “implementation”) to take the Markdown-formatted text and output it to HTML format. At that point, your document can be viewed in a web browser
or combined with a style sheet and printed. You can see a visual representation of this process below. <br>
</p>
<span class="how_does_it_work_img_wrapper">
<img src="https://i.postimg.cc/zXsNmNvw/process.png" alt="" class="how_does_it_work_img" >
</span>
</article>
</section>
<section class="main-section" id="Headings">
<header>Headings</header>
<article>
<p>
To create a heading, add number signs (#) in front of a word or phrase. The number of number signs you use should correspond to the heading level. For example, to create a heading level three <code> (<h3>) </code> , use three number signs
<em>(e.g., ### My Header)</em>.</p>
<table>
<tr>
<th>Mark Down</th>
<th>Rendered Output</th>
</tr>
<tr>
<td># Heading level 1</td>
<td>
<h1 style="font-size: 30px">Heading level 1</h1>
</td>
</tr>
<tr>
<td>## Heading level 2</td>
<td>
<h2>Heading level 2</h2>
</td>
</tr>
<tr>
<td>### Heading level 3</td>
<td>
<h3>Heading level 3</h3>
</td>
</tr>
<tr>
<td>#### Heading level 4</td>
<td>
<h4>Heading level 4</h4>
</td>
</tr>
<tr>
<td>##### Heading level 5</td>
<td>
<h5>Heading level 5</h5>
</td>
</tr>
<tr>
<td>###### Heading level 6</td>
<td>
<h6>Heading level 6</h6>
</td>
</tr>
</table>
</article>
</section>
<section class="main-section" id="Bold">
<header>Bold</header>
<article>
<p>To bold text, add two asterisks or underscores before and after a word or phrase. To bold the middle of a word for emphasis, add two asterisks without spaces around the letters.</p>
<table>
<tr>
<th>Mark Down</th>
<th>HTML</th>
<th>Rendered Output</th>
</tr>
<tr>
<td>I just love **bold text**.</td>
<td>I just love <strong>bold text</strong></td>
<td>I just love <strong>bold text</strong>.</td>
</tr>
<tr>
<td>I just love __bold text__.</td>
<td>I just love <strong>bold text</strong>.</td>
<td>I just love <strong>bold text</strong>.</td>
</tr>
<tr>
<td>Love**is**bold</td>
<td>Love<strong>is</strong>bold</td>
<td>Love<strong>is</strong>bold</td>
</tr>
</table>
</article>
</section>
<section class="main-section" id="Italic">
<header>Italic</header>
<table>
<tr>
<th>Mark Down</th>
<th>HTML</th>
<th>Rendered Output</th>
</tr>
<tr>
<td>Italicized text is the *cat's meow*.</td>
<td>Italicized text is the <em>cat's meow</em>.</td>
<td>Italicized text is the <em>cat's meow</em>.</td>
</tr>
<tr>
<td>Italicized text is the _cat's meow_.</td>
<td>Italicized text is the <em>cat's meow</em>. </td>
<td>Italicized text is the <em>cat's meow</em>.</td>
</tr>
<tr>
<td>A*cat*meow</td>
<td>A<em>cat</em>meow</td>
<td>A<em>cat</em>meow</td>
</tr>
</table>
</section>
<section class="main-section" id="Blockquotes">
<header>Blockquotes</header>
<p>To create a blockquote, add a <code> > </code> in front of a paragraph.</p>
<p>
<code>
>Dorothy followed her through many of the beautiful rooms in her castle.
</code>
</p>
<p> The rendered output looks like this: </p>
<!-- add border-left -->
<p id="Blockquotes-markdown-output">Dorothy followed her through many of the beautiful rooms in her castle.</p>
</section>
<section class="main-section" id="Paragraphs">
<header>Paragraphs</header>
<p><code id="Paragraph-markdown-code">
* This is the first list item. <br>
* Here's the second list item. <br>
I need to add another paragraph below the second list item.<br>
* And here's the third list item.
</code></p>
<p>The rendered output looks like this:</p>
<!-- • Bullet point and space -->
<div id="Paragraph-markdown-output">
<code>
• This is the first list item. <br>
• Here’s the second list item. <br>
I need to add another paragraph below the second list item <br>
• And here’s the third list item.
</code>
</div>
</section>
<section class="main-section" id="Unordered_list">
<header>Unordered list</header>
<p>Unordered Lists To create an unordered list, add dashes (-), asterisks (*), or plus signs (+) in front of line items. Indent one or more items to create a nested list.</p>
<table>
<tr>
<th>Mark down</th>
<th>HTML</th>
<th>Rendered Output</th>
</tr>
<tr>
<td> - First item</td>
<td><li>First item</li></td>
<td>
• First item
</td>
</tr>
<tr>
<td> - Second item</td>
<td> <li>Second item</li></td>
<td>
• Second item
</td>
</tr>
<tr>
<td>- Third item</td>
<td><li>Third item</li></td>
<td>
• Third item
</td>
</tr>
<tr>
<td>- Fourth item</td>
<td><li>Fourth item</li></td>
<td> • Fourth item</td>
</tr>
</table>
</section>
<section class="main-section" id="Reference">
<header>Reference</header>
<a href="https://www.markdownguide.org/getting-started/#how-does-it-work" target="_blank">🔗 MarkDown guide</a>
<ul>
<li><a href="https://daringfireball.net/projects/markdown/syntax" target="_blank">Source 1</a></li>
<li><a href="https://guides.github.com/features/mastering-markdown/" target="_blank">Source 2</a></li>
<li><a href="https://en.wikipedia.org/wiki/Markdown" target="_blank">Source 3</a></li>
<li><a href="https://learnxinyminutes.com/docs/markdown/" target="_blank">Source 4</a></li>
<li><a href="https://readwrite.com/2012/04/17/why-you-need-to-learn-markdown/" target="_blank">Source 5</a></li>
</ul>
</section>
</main>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
:root {
--main-fnt: "Montserrat", sans-serif;
--global-line-hgt: 2.3;
--font-h1: 35px;
--font-p: 16px;
--nav-bar-bg: #2d2f3e;
}
/* ===============
-Body-
==================
*/
body {
font-family: var(--main-fnt);
line-height: var(--global-line-hgt);
}
/* ================
-NavBar-
===================
*/
#navbar {
position: fixed;
left: 0;
width: 330px;
border-right: 4px solid silver;
height: 100%;
background: var(--nav-bar-bg);
color: white;
}
#navbar header {
font-size: 21px;
line-height: 1.2;
padding: 20px 10px;
}
#navbar ul {
list-style: none;
}
.nav-link {
color: white;
width: 100%;
padding: 3px;
margin-bottom: 2px;
padding-left: 7px;
display: inline-block;
border-left: 5px solid lightgreen;
text-decoration: none;
background: black;
position: relative;
z-index: 10;
overflow: hidden;
transition-duration: 100ms;
}
/* ========================================
----Main-Doc----
==========================================
*/
#main-doc {
position: absolute;
left: 330px;
padding: 20px 20px;
width: auto;
float: right;
color: white;
background: #1a1b27;
}
/*-headers-*/
#main-doc Header {
font-size: var(--font-h1);
border-bottom: 1px solid;
}
#main-doc p {
font-size: var(--font-p);
margin-left: 20px;
margin-top: 5px;
margin-bottom: 10px;
width: auto;
}
/* - ALL -CodeBlocks- */
code {
background: #b5b5b5;
display: inline-block;
font-size: 12px;
width: auto;
text-align: left;
border-radius: 2px;
color: black;
}
/* how_does_it_work */
.how_does_it_work_img_wrapper {
display: block;
margin-left: 20px;
/* border: 1px solid #000; */
/* background: linear-gradient(to right, white 25%, #1A1B27 60% ) */
}
/* Italic */
#Italic table {
margin-top: 20px;
}
/* Blockquotes */
#Blockquotes-markdown-output {
margin-left: 20px;
padding-left: 10px;
border-left: 5px solid silver;
}
/* Paragraph-section-code */
#Paragraph-markdown-code {
padding: 20px;
margin-top: 10px;
}
#Paragraph-markdown-output {
padding: 20px 40px;
margin-top: 10px;
margin-left: 20px;
}
/*
====================
Tables
====================
*/
table {
text-align: center;
margin: auto;
height: 250px;
}
table,
th,
td {
width: 800px;
margin-left: 20px;
border: 2px solid white;
border-collapse: collapse;
border-spacing: 10px;
color: white;
padding: 0px;
vertical-align: middle;
}
/*==============
All Links
===============*/
/* ID Reference */
#Reference a {
margin: 5px ;
padding: 5px;
display: inline-block;
text-decoration: none;
/* border: 1px solid #000; */
}
#Reference ul li {
list-style: none;
display: inline;
font-size: 10px;
margin-right: -0px;
/* border-right: 10px solid silver; */
border-left: 10px solid silver;
}
#Reference a:link {
color: white;
}
#Reference a:visited {
color: yellow;
}
#Reference a:hover {
color: purple;
}
#Reference a:active {
color: silver;
}
a:hover {
color: #8affab;
}
@media (max-width: 1192px) {
:root {
--global-line-hgt: 2.1;
--font-h1: 35px;
--font-p: 17px;
--nav-bar-bg: #2d2f3e;
}
#navbar {
min-width: 599px;
position: absolute;
left: 0;
top: 0;
width: 100%;
background: var(--nav-bar-bg);
color: white;
}
#navbar header {
position: absolute;
z-index: 500;
top: 0;
display: block;
width: 100%;
text-align: center;
font-size: 19px;
line-height: 1.1;
padding: 20px 10px;
}
#nav-link-wrapper {
position: absolute;
width: 100%;
height: 210px;
top: 60px;
overflow: auto;
z-index: -0;
}
.nav-link {
color: white;
top: 0px;
width: 100%;
padding: 5px;
margin-bottom: 0px;
display: block;
border-left: 1px solid lightgreen;
border-bottom: 1px solid silver;
transition-duration: 50ms;
}
/* ========================================
----Main-Doc----
==========================================
*/
#main-doc {
min-width: 599px;
position: absolute;
top: 270px;
left: 0px;
border-top: 5px solid lightgreen;
border-bottom: 5px solid #ac72cc;
padding: 0px 10px;
width: 100%;
color: white;
background: #1a1b27;
}
table {
width: auto;
height: 150px;
}
/* how_does_it_work */
.how_does_it_work_img {
width: 320px;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.