diff --git a/web/app/components/input/__markdown-link/input__markdown-link.scss b/web/app/components/input/__markdown-link/input__markdown-link.scss new file mode 100644 index 00000000..08fb0b53 --- /dev/null +++ b/web/app/components/input/__markdown-link/input__markdown-link.scss @@ -0,0 +1,11 @@ +.input__markdown-link { + font-weight: 700; + white-space: nowrap; + text-decoration: none; + cursor: pointer; + color: #0aa; + + &:hover { + color: #06c5c5; + } +} diff --git a/web/app/components/input/__markdown/input__markdown.scss b/web/app/components/input/__markdown/input__markdown.scss new file mode 100644 index 00000000..8abd80e6 --- /dev/null +++ b/web/app/components/input/__markdown/input__markdown.scss @@ -0,0 +1,3 @@ +.input__markdown { + margin-bottom: 5px; +} diff --git a/web/app/components/input/index.js b/web/app/components/input/index.js index f4b0cb63..b7753548 100644 --- a/web/app/components/input/index.js +++ b/web/app/components/input/index.js @@ -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'); diff --git a/web/app/components/input/input.jsx b/web/app/components/input/input.jsx index 47f57763..68852b60 100644 --- a/web/app/components/input/input.jsx +++ b/web/app/components/input/input.jsx @@ -146,6 +146,13 @@ export default class Input extends Component { {mods.type === 'main' && (
+
+ Styling with{' '} + + Markdown + {' '} + is supported +
Subscribe to this{' '} Thread diff --git a/web/markdown-help.html b/web/markdown-help.html new file mode 100644 index 00000000..6853dc41 --- /dev/null +++ b/web/markdown-help.html @@ -0,0 +1,415 @@ + + + + + + + How to use Markdown in Remark + + + + + + + +
+
+ +

How to use Markdown in Remark

+
+
+ +
+
+ +
+

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.

+ +

Headers & Quotes

+

Sometimes it's useful to have different levels of headings + to structure your comments. Start lines with a `#` to + create headings.

+ +

You can use one `#` all the way up to `######` six for + different heading sizes.

+ +

If you’d like to quote someone, use the > character before + the line

+ +

Text

+ +

It's very easy to make some words bold: + surround them with double asterisks ** + and other words italic: surround them with one + asterisk *.

+

You can even link to Google! using this syntax:
+ [link to Google!](http://google.com)

+ +

Lists

+ +

If you want numbered lists:

+

+ 1. One
+ 2. Two
+ 3. Three
+   3.1. Item 3.1
+   3.2. Item 3.2
+

+ +

If you want bullet point

+ +

+ * Item 1
+ * Item 2
+   * Item 2a
+   * Item 2b
+

+ +

Images

+ +

If you want to embed images, this is how you do it:

+ +

+ 

![Image of my cat]
+(https://placekitten.com/400/400)
+ + +

+ +

Code

+ +

You can create code span by wrapping + text in backtick quotes: `your code`

+ +

Tables

+ +

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 |:

+ + 
+First Header | Second Header
+------------ | -------------
+Content from cell 1 | Content from cell 2
+Content in the first column | Content in the second column
+
+ + +
+ + + +
+
+ + + diff --git a/web/webpack.config.js b/web/webpack.config.js index b73ddb28..4e5d4828 100644 --- a/web/webpack.config.js +++ b/web/webpack.config.js @@ -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$)/,