-
Notifications
You must be signed in to change notification settings - Fork 318
Markdown with cutemarked
The basic rules where still noted in the introduction. The elements for a fast and successful start into the world of markdown are explained in the following chapter. Beyond that, CuteMarkED offers some extensions, allowing more complex HTML results. These enhancements are not part of the basic vocabulary by Gruber, but they are supported by other markdown editors more or less too.
First, the options are described, examples follow at the end of each section.
This means all elements pointing to everything between start and end of a paragraph. A paragraph usually is identified by a blank line in markdown notation. But this is not mandatory. In technical view key ⏎ ("Enter-key") generates the code for end of paragraph. Examine a text from begin to end all paragraphs are separated by ⏎, except beginning of the first and ending of the last.
There are six level, marked by one # to ###### hash symbols at the beginning of a line. CuteMarkEd enlarges text in those paragraphs as a support, while writing. This visual structure support is not stored in the document. The document is always stored as plain text.
Surtcuts ALT ← or ALT → increase or decrease a paragraph level.
A > ("larger") symbol at start of line is marking the beginning of quotes. Depending to the style set used, quotes are differently displayed. You may switch them with STRG 1...7 or select one from the menu (Extra → Styles).
CuteMarkEd HTML code will enclose quotes with the corresponding
<blockquote>command.
The Tab key will indent the following described list options. This creates levels. A missing list symbol after Tab indents to the preceding list level. You may freely mix list marks. The notation of present hierarchy is defined with the first entry.
Place a - or + at the beginning of a line to label a bullet list entry.
Beginning with a number 1 (or any other) together with a period an a space generates a numbered list. Correct numbering is done by CuteMarkEd, you may simply repeat 1 (or any other) in each line of the ordered list.
CuteMarkEd does support alphabetical lists as-well. This is not part of the standard and has to be activated with Extras → Markdown Enhancements → Alphabetical Lists. Usage is same as described for numbered lists, there is no distinction between upper or lower case letters.
Lists with a leading heading and following description. CuteMarkEd recognizes them by a colon at the beginning of a line or paragraph. The description may follow directly in the following line or separated by one (or more) blank line. You may create more than one indented paragraphs as a description for a definition, but only the first paragraph must have the leading colon.
Blank line(s) between definition and text element can control whether the text element is enclosed with HTML paragraph marks (<P> ... </ P>) or not.
Definition Lists are not part of the standard and not supported in every theme, CuteMarkEd offers for display. The generated HTML code will always contain suitable code translations for addressing it with some additional style sheet options.
The basic vocabulary does not support tables. CuteMarkEd supports a notation made popular by PHP-Markdown-Extra. Columns are seperated by a pipe symbol |. The symbol is optional at the start or end of line, but you can not vary leaving or using it.
Tables are recognized by their title line followed by a formatting description. The title line defines the interpretation fo the pipe symbol (start/end of line). The formatting description defines the alignment of the columns. CuteMarkED corrects missing pipe-symbols at the end of a line during export to html.
Columns connecting cells are currently not supported.
A code sample area can be notified by three or more spaces at the beginning of each line. Using this option may be a little bit exhausting for longer code samples. Because of this, starting a line with three or more tilde symbols (~~~) starts and ends an area, that is displayed as typed in the resulting HTML document. For secure recognition a leading and trailing blank line is suitable. This is known as Fenced Codeblock. If Extra → Code highlighting is activated, the code block (HTML, Javascript, PHP, …) will be nicely formatted.
Code samples are surrounded by
<pre><code>in resulting HTML.
Separating lines will be generated with three or more asterix *** in a line.
The basic elements of standard markdown within a paragraph are bold, italics, bold italics, ~~~strike-through~~~ and as code.
Line breaks within paragraphs without trailing paragraph spacing
are created with a few spaces at the end of a line before pressing ⏎.
Without the spaces at the end CuteMarkEd will take all lines together in one paragraph without line break. This line break (because of the spaces) is created with line spacing. True paragraphs have a little more spacing usually.
CuteMarkEd will export one
<br>as line break.
There are several options for creating hyperlinks.
[text](address "title")
The text in square brackets will be linked to the address in round brackets. There you may add an optional title in quotation marks, that is shown as pop-up in modern browsers.
[text][reference]
plus anywhere else in a single line
[reference]: address "title"
The square brackets twice connect the link text to a reference anywhere in the document. This is useful for using one address in more than one link. The reference line will not appear in the resulting document, the link will behave similar to the first described option.
text[^unique-id]
plus anywhere else in a single line
[^unique-id]: footnote
The Caret generates a special reference at the end of the document, well known as footnote in a usual (paper based) document. CuteMarkEd will translate this into a linked number, leading to the footnote at the bottom, and a backlink to the number. You should use a self explaining unique id as footnote links. CuteMarkEd will replace all footnote links with sequential numbering.
Currently, the footnote linking is not supported in the preview window of CuteMarkEd.
Including images is similar to hyperlinks. The little difference is a leading exclamation mark. The text in square brackets is used in browsers, where image display is deactivated. The link to image is the address, where the image is stored.
Images are used as is. This means, that there is no scaling option. Depending to your requirements you have to scale the used images before storing to a suitable size or you have to add suitable css styles for sizing the images.
If you type an email address into your document, CuteMarkEd will translate it into a coded area. This will hamper address spiders their work. [email protected] becomes
<a href="mailto:name@domain.tld">name@domain.tld</a>
CuteMarkEd is a simple text editor, therefore you can type real HTML into your document. If it is valid code, it will be used as expected, in preview and resulting HTML pages. There is no validation of it. If your added formatting commands are not correct, this may line up in unexpected results.
In Extra → Markdown Extensions → … you find some optional translations of markdown into HTML (and PDF, if you want). Please note, that not all themes do support all extensions. This is not a limitation of CuteMarkEd, but by the theme. The following sample area includes some of these extensions, try by yourself.
Because of GitHub markdown limitations, it is not possible to display the markdown translations of CuteMarkEd correctly. To give you a complete impression of the above descriptions, copy the following code into the edit window of CuteMarkEd and step through the different themes (STRG1 … STRG6) or Extra → Styles → … .
# Heading 1
to
###### Heading 6
> This is a comment,...
>> and that is a comment in a comment
1. Ordered List
7. With Hirarchy
1. numbered
7. indented
1. still counting
Some more text indented to the preceeding hirachy.
Forced by some blanks in the first (numbered) line. Details below.
1. the higher hirarchy aswell
- with an unordered list
+ simply as that
* you may mix symbols
9. The leading number does not matter, only remind number, period and space for introduction.
The definition
: belonging description
Another descritpion
: This is an indented element with lower hirarchy.
And a following paragraph in it.
3rd level description
: with some more details in it.
| Column 1 | Column 2 | Column 3 | Column 4 |
| :-: | :- | -: | - |
| Centered | Left aligned | flush right | Standard |
|multiple columns are currently not supported||||
Sample Code
***
**bold**
*italics*
***bold & italics***
~~strike-through~~
`inline code`
<span style="font-size:2em">translated html</span>
<!-- Smarty Pants -->
-- or --- or ``text'' or "text" or ...
[John Gruber][x] and *WYSIWYG*[^1]
[^1]: [What you see is what you get](http://en.wikipedia.org/wiki/Wysiwyg "Background information from Wikipedia")
[x]: http://daringfireball.net/projects/markdown/ "Project Page of John Gruber"