Add help page about markdown formatting #8
This commit is contained in:
Jack
igoradamenko
@@ -0,0 +1,11 @@
|
||||
.input__markdown-link {
|
||||
font-weight: 700;
|
||||
white-space: nowrap;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
color: #0aa;
|
||||
|
||||
&:hover {
|
||||
color: #06c5c5;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
.input__markdown {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
@@ -18,3 +18,5 @@ require('./__preview/input__preview.scss');
|
||||
require('./__preview-wrapper/input__preview-wrapper.scss');
|
||||
require('./__rss/input__rss.scss');
|
||||
require('./__rss-link/input__rss-link.scss');
|
||||
require('./__markdown/input__markdown.scss');
|
||||
require('./__markdown-link/input__markdown-link.scss');
|
||||
|
||||
@@ -146,6 +146,13 @@ export default class Input extends Component {
|
||||
|
||||
{mods.type === 'main' && (
|
||||
<div className="input__rss">
|
||||
<div class="input__markdown">
|
||||
Styling with{' '}
|
||||
<a className="input__markdown-link" target="_blank" href="markdown-help.html" target="_blank">
|
||||
Markdown
|
||||
</a>{' '}
|
||||
is supported
|
||||
</div>
|
||||
Subscribe to this{' '}
|
||||
<a className="input__rss-link" href={RSS_THREAD_URL} target="_blank">
|
||||
Thread
|
||||
|
||||
@@ -0,0 +1,415 @@
|
||||
<!doctype html>
|
||||
<html class="no-js" lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<title>How to use Markdown in Remark</title>
|
||||
<meta name="description" content="">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<style>
|
||||
html {
|
||||
color: #222;
|
||||
font-size: 1em;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
hr {
|
||||
display: block;
|
||||
height: 1px;
|
||||
border: 0;
|
||||
border-top: 1px solid #ccc;
|
||||
margin: 1em 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #4183c4;
|
||||
}
|
||||
|
||||
audio,
|
||||
canvas,
|
||||
iframe,
|
||||
img,
|
||||
svg,
|
||||
video {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
textarea {
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.browserupgrade {
|
||||
margin: 0.2em 0;
|
||||
background: #eee;
|
||||
color: #000;
|
||||
padding: 0.2em 0;
|
||||
}
|
||||
|
||||
|
||||
body {
|
||||
font: 16px/26px Helvetica, Helvetica Neue, Arial;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
width: 90%;
|
||||
margin: 0 5%;
|
||||
}
|
||||
|
||||
.title {
|
||||
color: #222;
|
||||
margin: 40px 0 0 0;
|
||||
}
|
||||
|
||||
nav ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
nav a {
|
||||
display: block;
|
||||
margin-bottom: 10px;
|
||||
padding: 15px 0;
|
||||
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
|
||||
color: #222;
|
||||
}
|
||||
|
||||
nav a:hover,
|
||||
nav a:visited {
|
||||
color: #222;
|
||||
}
|
||||
|
||||
nav a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.main {
|
||||
padding: 30px 0;
|
||||
}
|
||||
|
||||
.main article h1 {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
.main aside {
|
||||
color: #222;
|
||||
padding: 20px 40px;
|
||||
}
|
||||
|
||||
.main aside p {
|
||||
margin: 0 0 20px 0;
|
||||
padding: 0;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
.main aside p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.footer-container footer {
|
||||
color: #222;
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
.ie7 .title {
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 480px) {
|
||||
|
||||
nav a {
|
||||
float: left;
|
||||
width: 27%;
|
||||
margin: 0 1.7%;
|
||||
padding: 25px 2%;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
nav li:first-child a {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
nav li:last-child a {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
nav ul li {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.oldie nav a {
|
||||
margin: 0 0.7%;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 768px) {
|
||||
|
||||
nav {
|
||||
float: right;
|
||||
width: 38%;
|
||||
}
|
||||
|
||||
.main article {
|
||||
float: left;
|
||||
width: 57%;
|
||||
}
|
||||
|
||||
.main aside {
|
||||
float: right;
|
||||
width: 28%;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1140px) {
|
||||
|
||||
.wrapper {
|
||||
width: 1026px;
|
||||
/* 1140px - 10% for margins */
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none !important;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.visuallyhidden {
|
||||
border: 0;
|
||||
clip: rect(0 0 0 0);
|
||||
height: 1px;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
}
|
||||
|
||||
.visuallyhidden.focusable:active,
|
||||
.visuallyhidden.focusable:focus {
|
||||
clip: auto;
|
||||
height: auto;
|
||||
margin: 0;
|
||||
overflow: visible;
|
||||
position: static;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.invisible {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.clearfix:before,
|
||||
.clearfix:after {
|
||||
content: " ";
|
||||
display: table;
|
||||
}
|
||||
|
||||
.clearfix:after {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.clearfix {
|
||||
*zoom: 1;
|
||||
}
|
||||
|
||||
@media print {
|
||||
|
||||
*,
|
||||
*:before,
|
||||
*:after {
|
||||
background: transparent !important;
|
||||
color: #000 !important;
|
||||
box-shadow: none !important;
|
||||
text-shadow: none !important;
|
||||
}
|
||||
|
||||
aside {
|
||||
display: none;
|
||||
}
|
||||
|
||||
a,
|
||||
a:visited {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
a[href]:after {
|
||||
content: " ("attr(href) ")";
|
||||
}
|
||||
|
||||
abbr[title]:after {
|
||||
content: " ("attr(title) ")";
|
||||
}
|
||||
|
||||
a[href^="#"]:after,
|
||||
a[href^="javascript:"]:after {
|
||||
content: "";
|
||||
}
|
||||
|
||||
pre,
|
||||
blockquote {
|
||||
border: 1px solid #999;
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
|
||||
thead {
|
||||
display: table-header-group;
|
||||
}
|
||||
|
||||
tr,
|
||||
img {
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100% !important;
|
||||
}
|
||||
|
||||
p,
|
||||
h2,
|
||||
h3 {
|
||||
orphans: 3;
|
||||
widows: 3;
|
||||
}
|
||||
|
||||
h2,
|
||||
h3 {
|
||||
page-break-after: avoid;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="header-container">
|
||||
<header class="wrapper clearfix">
|
||||
<a id="Introduction"></a>
|
||||
<h1 class="title">How to use Markdown in Remark</h1>
|
||||
</header>
|
||||
</div>
|
||||
|
||||
<div class="main-container">
|
||||
<div class="main wrapper clearfix">
|
||||
|
||||
<article>
|
||||
<p>Markdown is a lightweight and easy-to-use syntax for styling
|
||||
Remark comments. You control the display of the comment,
|
||||
formatting words as bold or italic, adding images, and
|
||||
creating lists are just a few of the things we can do with
|
||||
Markdown.</p>
|
||||
|
||||
<h2 id="Headers-Quotes">Headers & Quotes</h2>
|
||||
<p>Sometimes it's useful to have different levels of headings
|
||||
to structure your comments. Start lines with a `#` to
|
||||
create headings.</p>
|
||||
|
||||
<p>You can use one `#` all the way up to `######` six for
|
||||
different heading sizes.</p>
|
||||
|
||||
<p>If you’d like to quote someone, use the > character before
|
||||
the line</p>
|
||||
|
||||
<h2 id="Text">Text</h2>
|
||||
|
||||
<p>It's very easy to make some words <strong>bold</strong>:
|
||||
surround them with double asterisks **
|
||||
and other words <em>italic</em>: surround them with one
|
||||
asterisk *.</p>
|
||||
<p>You can even <a href="http://google.com"
|
||||
target="_blank">link to Google!</a> using this syntax:<br>
|
||||
[link to Google!](http://google.com)</p>
|
||||
|
||||
<h2 id="Lists">Lists</h2>
|
||||
|
||||
<p>If you want numbered lists:</p>
|
||||
<p>
|
||||
1. One<br>
|
||||
2. Two<br>
|
||||
3. Three<br>
|
||||
3.1. Item 3.1<br>
|
||||
3.2. Item 3.2<br>
|
||||
</p>
|
||||
|
||||
<p>If you want bullet point</p>
|
||||
|
||||
<p>
|
||||
* Item 1<br>
|
||||
* Item 2<br>
|
||||
* Item 2a<br>
|
||||
* Item 2b<br>
|
||||
</p>
|
||||
|
||||
<h2 id="Images">Images</h2>
|
||||
|
||||
<p>If you want to embed images, this is how you do it:</p>
|
||||
|
||||
<p>
|
||||
<pre>![Image of my cat]
|
||||
(https://placekitten.com/400/400)</pre>
|
||||
|
||||
<img src="https://placekitten.com/400/400" width="400" height="400">
|
||||
</p>
|
||||
|
||||
<h2 id="Code">Code</h2>
|
||||
|
||||
<p>You can create code span by wrapping
|
||||
text in backtick quotes: <strong>`your code`</strong></p>
|
||||
|
||||
<h2 id="Tables">Tables</h2>
|
||||
|
||||
<p>You can create tables by assembling a list of words and
|
||||
dividing them with hyphens - (for the first row), and then
|
||||
separating each column with a pipe |:</p>
|
||||
|
||||
<pre>
|
||||
First Header | Second Header
|
||||
------------ | -------------
|
||||
Content from cell 1 | Content from cell 2
|
||||
Content in the first column | Content in the second column
|
||||
</pre>
|
||||
|
||||
|
||||
</article>
|
||||
|
||||
<aside>
|
||||
<p>
|
||||
<a href="#Introduction">Introduction</a>
|
||||
</p>
|
||||
<p>
|
||||
<a href="#Headers-Quotes">Headers & Quotes</a>
|
||||
</p>
|
||||
<p>
|
||||
<a href="#Text">Text</a>
|
||||
</p>
|
||||
<p>
|
||||
<a href="#Lists">Lists</a>
|
||||
</p>
|
||||
<p>
|
||||
<a href="#Images">Images</a>
|
||||
</p>
|
||||
<p>
|
||||
<a href="#Code">Code</a>
|
||||
</p>
|
||||
<p>
|
||||
<a href="#Tables">Tables</a>
|
||||
</p>
|
||||
</aside>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -130,7 +130,7 @@ module.exports = {
|
||||
openAnalyzer: false,
|
||||
}),
|
||||
]),
|
||||
new Copy(['./iframe.html', './deleteme.html']),
|
||||
new Copy(['./iframe.html', './deleteme.html', './markdown-help.html']),
|
||||
],
|
||||
watchOptions: {
|
||||
ignored: /(node_modules|\.vendor\.js$)/,
|
||||
|
||||
Reference in New Issue
Block a user