-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathmarkdown.html
183 lines (154 loc) · 5.76 KB
/
markdown.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!--Stylesheet-->
<link rel="stylesheet" href="styles.css">
<title>Techopedia - Markdown</title>
</head>
<body>
<div class="container" style="width: auto;">
<!-- <div class="container" style="width:50%"></div>-->
<div class="mainDiv">
<nav class="navbar navbar-expand-md navbar-light">
<a class="logo" href="index.html">TECHOPEDIA</a>
<div class="container">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="Bootstrap.html">Bootstrap</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="markdown.html">Markdown</a>
</li>
<li class="nav-item">
<a class="nav-link" href="nodejs.html">Node.JS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="jquery.html">jQuery</a>
</li>
</ul>
</div>
</div>
</nav>
<hr class="m5">
<div class="container">
<!-- <h1 class="display-4 text-center">Bootstrap<br> <small class="text-muted">What is Bootstrap?</small></h1> -->
<img class="topicLogo img-fluid" src="markdown.png" alt="markdown logo">
</div>
<hr class="m5">
<section>
<h4>Markdown</h4>
<p class="subtitle">
Markdown is a basic markup language that is mostly used for simple documents that do not need to look fancy.
This would be things like "README" files, simple webpages, notes, etc.
</p>
</section>
<hr class="m5">
<section>
<h4>Brief Background</h4>
<p>
Markdown was created in 2004 by John Gruber.
The intended purpose of markdown was to be more readable and writable than other markup languages like HTML.
When it was released it was very basic so many people had to modify it so it suited their purpose.
Markdown is now one of the most popular markup languages, probably due to how simple and easy it is to use.
</p>
</section>
<hr class="m5">
<section>
<h4>Markdown Against HTML Equivalent</h4>
<p>You can use inline HTML in markdown</p>
<div class="row">
<div class="column">
<p>
This will make the text a title<br>=<br><br>
# The More "\#"s<br>
## There Are<br>
### The Smaller<br>
#### The Font<br><br>
You need to add two spaces at the end of a paragraph to create a linebreak <br><br>
_This will make the text italic_ <br>
**This will make the text bold** <br>
``This will make the text monotext`` <br>
~~This will make the text strikethrough~~ <br>
>this will indent the text<br><br>
"---" adds a line to the page. Text above becomes a header<br>
---<br>
but with two breaklines like this the the text is normal<br><br>
---<br>
This makes:<br>
* bullet<br>
* point<br>
* lists<br><br>
This makes:<br>
1. A<br>
2. numbered<br>
3. list<br><br>
[This is the clickable text for the link](www.this_is_the_link.com) <br>
"<br>
</p>
</div>
<div class="column">
<p>
<h1>same as this</h1><br><br><br>
<h1>same as this</h1><br>
<h2>same as this</h2><br>
<h3>same as this</h3><br>
<h4>same as this</h4><br><br>
same as this: <br><br><br><br>
<i>same as this<\b><br>
<b>same as this<\b><br>
<code>same as this<\code><br>
<strike>same as this<strike><br>
<blockquote>same as this<blockquote><br><br>
<h1>two tags will be needed<\h1><br>
<hr><br>
one for the title, the other for the line<br><br>
<hr><br>
<ul><br>
<li>bullet<\li><br>
<li>point<\li><br>
<li>list<\li><br>
<\ul><br>
<ol><br>
<li>A<\li><br>
<li>numbered<\li><br>
<li>list<\li><br>
<\ol><br>
<a href="www.this_is_the_link.com">clickable text for the link<\a><br>
<img alt="alt text if img fails to load" src="the/img/address.png"><br>
</p>
</div>
</div>
</section>
<div class="divAside">
<aside>
</aside>
</div>
</div>
</div>
<br/>
<hr>
<!-- Footer -->
<footer align="center">
<div class="container">© Design by: David, John, Steven and Shazna
</div>
</footer>
<!--Bootstrap Javascript-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>