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
|
// Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved.
// See License.txt for license information.
import {localizeMessage} from 'utils/utils.jsx';
import {formatText} from 'utils/text_formatting.jsx';
import {FormattedMessage} from 'react-intl';
import {Link} from 'react-router/es6';
import React from 'react';
export default class HelpFormatting extends React.Component {
render() {
const message = [];
message.push(localizeMessage('help.formatting.title', '# Formatting Text\n_____'));
message.push(localizeMessage('help.formatting.intro', 'Markdown makes it easy to format messages. Type a message as you normally would, and use these rules to render it with special formatting.'));
message.push(localizeMessage('help.formatting.style', '## Text Style\n\nYou can use either `_` or `*` around a word to make it italic. Use two to make it bold.\n\n* `_italics_` renders as _italics_\n* `**bold**` renders as **bold**\n* `**_bold-italic_**` renders as **_bold-italics_**\n* `~~strikethrough~~` renders as ~~strikethrough~~'));
message.push(localizeMessage('help.formatting.code', '## Code Block\n\nCreate a code block by indenting each line by four spaces, or by placing ``` on the line above and below your code.'));
message.push(localizeMessage('help.formatting.example', 'Example:') + '\n\n');
message.push(' ```\n ' + localizeMessage('help.formatting.codeBlock', 'code block') + '\n ```');
message.push(localizeMessage('help.formatting.renders', 'Renders as:'));
message.push('```\n' + localizeMessage('help.formatting.codeBlock', 'code block') + '\n```');
message.push(localizeMessage('help.formatting.syntax', '### Syntax Highlighting\n\nTo add syntax highlighting, type the language to be highlighted after the ``` at the beginning of the code block. Mattermost also offers four different code themes (GitHub, Solarized Dark, Solarized Light, Monokai) that can be changed in **Account Settings** > **Display** > **Theme** > **Custom Theme** > **Center Channel Styles**'));
message.push(localizeMessage('help.formatting.supportedSyntax', 'Supported languages are:\n`as`, `applescript`, `osascript`, `scpt`, `bash`, `sh`, `zsh`, `clj`, `boot`, `cl2`, `cljc`, `cljs`, `cljs.hl`, `cljscm`, `cljx`, `hic`, `coffee`, `_coffee`, `cake`, `cjsx`, `cson`, `iced`, `cpp`, `c`, `cc`, `h`, `c++`, `h++`, `hpp`, `cs`, `csharp`, `css`, `d`, `di`, `dart`, `delphi`, `dpr`, `dfm`, `pas`, `pascal`, `freepascal`, `lazarus`, `lpr`, `lfm`, `diff`, `django`, `jinja`, `dockerfile`, `docker`, `erl`, `f90`, `f95`, `fsharp`, `fs`, `gcode`, `nc`, `go`, `groovy`, `handlebars`, `hbs`, `html.hbs`, `html.handlebars`, `hs`, `hx`, `java`, `jsp`, `js`, `jsx`, `json`, `jl`, `kt`, `ktm`, `kts`, `less`, `lisp`, `lua`, `mk`, `mak`, `md`, `mkdown`, `mkd`, `matlab`, `m`, `mm`, `objc`, `obj-c`, `ml`, `perl`, `pl`, `php`, `php3`, `php4`, `php5`, `php6`, `ps`, `ps1`, `pp`, `py`, `gyp`, `r`, `ruby`, `rb`, `gemspec`, `podspec`, `thor`, `irb`, `rs`, `scala`, `scm`, `sld`, `scss`, `st`, `sql`, `swift`, `tex`, `vbnet`, `vb`, `bas`, `vbs`, `v`, `veo`, `xml`, `html`, `xhtml`, `rss`, `atom`, `xsl`, `plist`, `yaml`'));
message.push(localizeMessage('help.formatting.example', 'Example:') + '\n\n');
message.push(' ```go\n' + localizeMessage('help.formatting.syntaxEx', ' package main\n import "fmt"\n func main() {\n fmt.Println("Hello, 世界")\n }') + '\n ```');
message.push(localizeMessage('help.formatting.renders', 'Renders as:'));
message.push(localizeMessage('help.formatting.githubTheme', '**GitHub Theme**'));
message.push('');
message.push(localizeMessage('help.formatting.solirizedDarkTheme', '**Solarized Dark Theme**'));
message.push('');
message.push(localizeMessage('help.formatting.solirizedLightTheme', '**Solarized Light Theme**'));
message.push('');
message.push(localizeMessage('help.formatting.monokaiTheme', '**Monokai Theme**'));
message.push('');
message.push(localizeMessage('help.formatting.inline', '## In-line Code\n\nCreate in-line monospaced font by surrounding it with backticks.'));
message.push('```\n`monospace`\n```');
message.push(localizeMessage('help.formatting.renders', 'Renders as:') + ' `monospace`');
message.push(localizeMessage('help.formatting.links', '## Links\n\nCreate labeled links by putting the desired text in square brackets and the associated link in normal brackets.'));
message.push('`' + localizeMessage('help.formatting.linkEx', '[Check out Mattermost!](https://about.mattermost.com/)') + '`');
message.push(localizeMessage('help.formatting.renders', 'Renders as:') + ' ' + localizeMessage('help.formatting.linkEx', '[Check out Mattermost!](https://about.mattermost.com/)'));
message.push(localizeMessage('help.formatting.images', '## In-line Images\n\nCreate in-line images using an `!` followed by the alt text in square brackets and the link in normal brackets. Add hover text by placing it in quotes after the link.'));
message.push('```\n' + localizeMessage('help.formatting.imagesExample', '\n\nand\n\n[](https://travis-ci.org/mattermost/platform) [](https://github.com/mattermost/platform)') + '\n```');
message.push(localizeMessage('help.formatting.renders', 'Renders as:'));
message.push(localizeMessage('help.formatting.imagesExample', '\n\nand\n\n[](https://travis-ci.org/mattermost/platform) [](https://github.com/mattermost/platform)'));
message.push(localizeMessage('help.formatting.emojis', '## Emojis\n\nOpen the emoji autocomplete by typing `:`. A full list of emojis can be found [here](http://www.emoji-cheat-sheet.com/). It is also possible to create your own [Custom Emoji](http://docs.mattermost.com/help/settings/custom-emoji.html) if the emoji you want to use doesn\'t exist.'));
message.push('```\n' + localizeMessage('help.formatting.emojiExample', ':smile: :+1: :sheep:') + '\n```');
message.push(localizeMessage('help.formatting.renders', 'Renders as:'));
message.push(localizeMessage('help.formatting.emojiExample', ':smile: :+1: :sheep:'));
message.push(localizeMessage('help.formatting.lines', '## Lines\n\nCreate a line by using three `*`, `_`, or `-`.'));
message.push('`***` ' + localizeMessage('help.formatting.renders', 'Renders as:') + '\n***');
message.push(localizeMessage('help.formatting.quotes', '## Block quotes\n\nCreate block quotes using `>`.'));
message.push(localizeMessage('help.formatting.quotesExample', '`> block quotes` renders as:'));
message.push(localizeMessage('help.formatting.quotesRender', '> block quotes'));
message.push(localizeMessage('help.formatting.lists', '## Lists\n\nCreate a list by using `*` or `-` as bullets. Indent a bullet point by adding two spaces in front of it.'));
message.push('```\n' + localizeMessage('help.formatting.listExample', '* list item one\n* list item two\n * item two sub-point') + '\n```');
message.push(localizeMessage('help.formatting.renders', 'Renders as:'));
message.push(localizeMessage('help.formatting.listExample', '* list item one\n* list item two\n * item two sub-point'));
message.push(localizeMessage('help.formatting.ordered', 'Make it an ordered list by using numbers instead:'));
message.push('```\n' + localizeMessage('help.formatting.orderedExample', '1. Item one\n2. Item two') + '\n```');
message.push(localizeMessage('help.formatting.renders', 'Renders as:'));
message.push(localizeMessage('help.formatting.orderedExample', '1. Item one\n2. Item two'));
message.push(localizeMessage('help.formatting.checklist', 'Make a task list by including square brackets:'));
message.push('```\n' + localizeMessage('help.formatting.checklistExample', '- [ ] Item one\n- [ ] Item two\n- [x] Completed item') + '\n```');
message.push(localizeMessage('help.formatting.renders', 'Renders as:'));
message.push(localizeMessage('help.formatting.checklistExample', '- [ ] Item one\n- [ ] Item two\n- [x] Completed item'));
message.push(localizeMessage('help.formatting.tables', '## Tables\n\nCreate a table by placing a dashed line under the header row and separating the columns with a pipe `|`. (The columns don’t need to line up exactly for it to work). Choose how to align table columns by including colons `:` within the header row.'));
message.push('```\n' + localizeMessage('help.formatting.tableExample', '| Left-Aligned | Center Aligned | Right Aligned |\n| :------------ |:---------------:| -----:|\n| Left column 1 | this text | $100 |\n| Left column 2 | is | $10 |\n| Left column 3 | centered | $1 |') + '\n```');
message.push(localizeMessage('help.formatting.renders', 'Renders as:'));
message.push(localizeMessage('help.formatting.tableExample', '| Left-Aligned | Center Aligned | Right Aligned |\n| :------------ |:---------------:| -----:|\n| Left column 1 | this text | $100 |\n| Left column 2 | is | $10 |\n| Left column 3 | centered | $1 |'));
message.push(localizeMessage('help.formatting.headings', '## Headings\n\nMake a heading by typing # and a space before your title. For smaller headings, use more #’s.'));
message.push('```\n' + localizeMessage('help.formatting.headingsExample', '## Large Heading\n### Smaller Heading\n#### Even Smaller Heading') + '\n```');
message.push(localizeMessage('help.formatting.renders', 'Renders as:'));
message.push(localizeMessage('help.formatting.headingsExample', '## Large Heading\n### Smaller Heading\n#### Even Smaller Heading'));
message.push(localizeMessage('help.formatting.headings2', 'Alternatively, you can underline the text using `===` or `---` to create headings.'));
message.push('```\n' + localizeMessage('help.formatting.headings2Example', 'Large Heading\n-------------') + '\n```');
message.push(localizeMessage('help.formatting.renders', 'Renders as:'));
message.push(localizeMessage('help.formatting.headings2Example', 'Large Heading\n-------------'));
return (
<div>
<span
dangerouslySetInnerHTML={{__html: formatText(message.join('\n\n'))}}
/>
<p className='links'>
<FormattedMessage
id='help.learnMore'
defaultMessage='Learn more about:'
/>
</p>
<ul>
<li>
<Link to='/help/messaging'>
<FormattedMessage
id='help.link.messaging'
defaultMessage='Basic Messaging'
/>
</Link>
</li>
<li>
<Link to='/help/composing'>
<FormattedMessage
id='help.link.composing'
defaultMessage='Composing Messages and Replies'
/>
</Link>
</li>
<li>
<Link to='/help/mentioning'>
<FormattedMessage
id='help.link.mentioning'
defaultMessage='Mentioning Teammates'
/>
</Link>
</li>
<li>
<Link to='/help/attaching'>
<FormattedMessage
id='help.link.attaching'
defaultMessage='Attaching Files'
/>
</Link>
</li>
<li>
<Link to='/help/commands'>
<FormattedMessage
id='help.link.commands'
defaultMessage='Executing Commands'
/>
</Link>
</li>
</ul>
</div>
);
}
}
|
