GhaSShee


Markdeep


**Markdeep Feature Demo** Morgan McGuire This demonstration documents the features of and acts as a test for it. Markdeep is a text formatting syntax that extends Markdown, and a Javascript program for making it work in browsers. The two most powerful features are its ability to run in any **web browser** on the client side and the inclusion of **diagrams**. to see this document without automatic formatting. Markdeep is free and easy to use. It doesn't need a plugin, or Internet connection. There's nothing to install. Just start writing in Vi, Nodepad, Zed, Emacs, Visual Studio, Atom, or another editor! You don't have to export, compile, or otherwise process your document. Basic Formatting ======================================================================================= Text formatting: Source | Result -----------------------------------------|------------------------------ `**bold**` | **bold** `__bold__` | __bold__ `*italic*` | *italic* `_italic_` | _italic_ `~~strikethrough~~` | ~~strikethrough~~ `inline code` | `inline code` You can add CSS to change the styles. See the Custom Formatting section for some examples. Formatted text may **cross lines** and be as small as **a** single character. It can _also be indented and split across lines_ simultaneously. Markdeep intelligently does not apply bold or italic formatting to math expressions such as x = 3 * y - 2 * z or WORDS_WITH_INTERNAL_UNDERSCORES. It also protects HTML `` in code blocks from disappearing. If you _want_ italics or bold inside of a word, for example in: SCUBA = Self Contained Underwater Breathing Apparatus, then just use HTML `` and `` tags---a markdown syntax won't be any more readable in that case. Links --------------------------------------------------------------------------------------- There are many forms of implicit and explicit links: Source | Result -----------------------------------------|--------------------------------------------- `[hyperlink](http://casual-effects.com)` | [hyperlink](http://casual-effects.com) `` | `http://casual-effects.com` | http://casual-effects.com `` | `morgan@casual-effects.com` | morgan@casual-effects.com `Lists section` | Lists section `Tiny Grids subsection` | Tiny Grids subsection `Section [Lists]` | Section [Lists] `sec. [lists]` | sec. [lists] `subsection [lists]` | subsection [lists] `table [states]` | table [states] `figure [robot]` | figure [robot] `fig. [robot]` | fig. [robot] `Figure [robot]` | Figure [robot] `Listing [sort]` | Listing [sort] `[New York Times][nyt]` | [New York Times][nyt] `[Google][]` | [Google][] `footnote [^syntax]` | footnote [^syntax] `[#Kajiya86]` | [#Kajiya86] Any section header name prefaced by "section", "subsection", or "sec." will automatically be linked to that section. To link by number, put the name in brackets. You can also insert HTML anchor (``) tags to create arbitrary internal links. Reference-style links include arbitrary formatted text in brackets followed by a case-insensitive symbolic name that must be defined elsewhere in the document: - Example using a symbolic name: [New York Times][nyt] - Example using the text as its own symbol: [Google][] Put the definitions at a convenient location elsewhere in the document: ~~~~~~~~~~~~ [nyt]: http://nytimes.com [google]: http://google.com ~~~~~~~~~~~~ Markdeep also supports footnotes, endnotes [^syntax], and citations [#Kajiya86] using a similar syntax. The actual notes and bibliography may be placed at the bottom of the document: ~~~~~~~~~~~~~~~~ [#Kajiya86]: James T. Kajiya. 1986 ... [^syntax]: Endnotes look like ... ~~~~~~~~~~~~~~~~ URLs with various forms of special characters are handled well: - - [hyperlinks to URLs with underscores](https://archive.org/stream/Bazin_Andre_What_Is_Cinema_Volume_1/Bazin_Andre_What_Is_Cinema_Volume_1_djvu.txt) - https://archive.org/stream/Bazin_Andre_What_Is_Cinema_Volume_1/Bazin_Andre_What_Is_Cinema_Volume_1_djvu.txt **Bibliography**: [#Kajiya86]: James T. Kajiya. 1986. The Rendering Equation. In _Proceedings of Computer Graphics and Interactive Techniques (SIGGRAPH '86)_, ACM, 143-150. http://dx.doi.org/10.1145/15922.15902 [^syntax]: Endnotes look like reference-style links with an empty text field. Endnotes may not contain multiple paragraphs (sorry, David Foster Wallace), although they may refer to _other_ endnotes. [nyt]: http://nytimes.com [google]: http://google.com Lists --------------------------------------------------------------------------------------- A blank line must preced lists. Lists have lines that begin with a number (which is not required to increment) and a period, or a bullet character (-, *, +). They can be nested:
1. Monday
2. Tuesday
  1. Morning
  2. Afternoon
3. Wednesday
  - Bullets
  - Bullets
1. Thursday
  + Bullets
  + Bullets
1. Friday
  * Bullets
Examples of lists and floating diagrams: ***************************** 1. Monday * A B C * 2. Tuesday * *-------->o<------->o * 1. Morning * ^ / ^ | * 2. Afternoon * | v \ v * 3. Wednesday * o----->o---->o<---->* * - Bullets * D E F G * - Bullets ***************************** 4. Thursday 5. Friday A list with just bullets: - Bread - Fish - Milk - Cheese Email-style indenting creates a blockquote: > This is an indented blockquote: Ut at felis diam. Aliquam massa odio, pharetra ut neque sed, commodo > dignissim orci. Curabitur quis velit gravida, blandit diam nec, > lacinia quam. Maecenas pharetra, velit in vestibulum auctor, diam > ipsum suscipit arcu, non sodales orci nibh sit amet leo. Nulla dictum Blockquotes formatted in the style of an actual quotation receive special treatment for fancy quoting: > "You want to make it seem alive and effortless and fun, but that's an > art that took me 25 years to really learn. I wanted to do it very much > 25 years ago, but I didn't know how." > > --- David O. Russell, director of American Hustle - Level 1 - Level 2 - Level 3 - Level 1 again - 1 - 1.a - 1.a.i - 1.a.ii - 1.b Lists can also: * Use asterisks * Instead of * Minus signs * `or have code` * *and* other formatting or + Use plus + Signs ************** _Song of Myself: 35_ * | | * * --+<---+-- * Would you hear of an old-time sea-fight?
* | ^ * Would you learn who won by the light of the moon and stars?
* v | * List to the yarn, as my grandmother's father the sailor told it to me. * --+--->+-- * * | | * Walt Whitman ************** Tables ------------------------------------------------------------------------------ Source: ~~~~~~~~~~~~ Maine | Iowa | Colorado -------|------|---------- 1 | 4 | 10 ME | IA | CO Blue | Red | Brown [Optional caption] Maine | Iowa | Colorado -------|------|---------- 1 | 4 | 10 ME | IA | CO Blue | Red | Brown [Table [states]: Caption with label.] Item | Type | Cost ---- |:----:| ----: Fish | F | 1.00 Axe | W | 3.25 Gold | I |20.50 ~~~~~~~~~~~~ Result: Maine | Iowa | Colorado -------|------|---------- 1 | 4 | 10 ME | IA | CO Blue | Red | Brown [Optional caption] Maine | Iowa | Colorado -------|------|---------- 1 | 4 | 10 ME | IA | CO Blue | Red | Brown [Table [states]: Caption with label.] With alignment: Item | Type | Cost ---- |:----:| ----: Fish | F | 1.00 Axe | W | 3.25 Gold | I |20.50 Definition Lists ------------------------------------------------------------------------------ Apple : Pomaceous fruit of plants of the genus Malus in the family Rosaceae. Multiple paragraphs are supported. Orange : The fruit of an evergreen tree of the genus Citrus. - Can also - Put lists - In definitions Schedule Lists ------------------------------------------------------------------------------ Schedule lists contain titles that begin with a valid date. After the title, arbitrary indented content appears, including lists, text, and equations: ~~~~~~~~~~~~ Tuesday Feb 16, 2016: Project Launch - Create specifications - Initialize revision control system Friday Feb 19, 2016: Build Milestone - Build system fully functional - Placeholder unit tests committed ⋮ ~~~~~~~~~~~~ If the schedule is sufficiently long and dense, a calendar preview is shown before it. Formatted schedule lists look like: Tuesday Feb 16, 2016: Project Launch - Create specifications - Initialize revision control system Friday Feb 19, 2016: Build Milestone - Build system fully functional - Placeholder unit tests committed _Plan for weekend overtime if we miss this milestone_ Wednesday Feb 24, 2016: Site Visit **Whole team vistits client**. Dress appropriately. Friday Feb 26, 2016: Demo Milestone - Internal demonstrations for management - QA reports due Tuesday Feb 29, 2016: Code Freeze - Commit final features before this date - Only priority 1 fixes with issue tracking numbers after this point Monday Mar 7, 2016: Beta Wednesday Mar 16, 2016: Gold Dates can be in any unambigous format that includes a month, day, and four-digit year between 1000 and 2999, such as: - 2001-03-01 - 1 Apr. 1999 - 4-07-1976 - February 16, 2016 - 2020 Jan. 15 - May 15th, 1982 The US date format MM/DD/YYYY is not supported because it is ambiguous. The date may include the name of a day of the week (e.g., Sunday). It will be replaced with the correct day. When months are given by name, they must be in English (I'm sorry--there are too many variations otherwise). Images and Video ------------------------------------------------------------------------------ There's no natural way to embed an image into something that is readable as a text document. Markdeep follows markdown's somewhat reasonable syntax. The source ` ![A picture of a robot](robot.jpg)` becomes: ![A picture of a robot](robot.jpg) Optional labels may be applied: ` ![Figure [robot]: A picture of a robot](robot.jpg)` ![Figure [robot]: A picture of a robot](robot.jpg) Any text after the URL is used as HTML attributes. If the attributes include width or height specifications, then the image is linked to the original. ` ![Figure [robot2]: A picture of a robot](robot.jpg width="100px" border="1")` ![Figure [robot2]: A picture of a robot](robot.jpg width="100px" border="1") You can also just use a raw HTML `` tag: ``: Captionless images work as well. Source `![](robot.jpg)` becomes: ![](robot.jpg) Images are centered if they appear in their own paragraph block and inlined otherwise. Video file extensions are automatically detected and will embed a small video player: ![A video](rocket.mp4) URLs for Youtube and Vimeo videos will also automatically embed a video player: ![State Zero](https://www.youtube.com/watch?v=QgPMyvZMBY0) ![The Boy with a Camera For a Face](https://vimeo.com/channels/staffpicks/151493973) Symbol Substitutions ------------------------------------------------------------------------------ Markdeep converts `==>` and `<==` to arrows if they aren't in a code block. Examples: - if this ==> then that - here <== there If there is an em dash---like that, or an en dash--like that, they will be converted to the appropriate character. An "x" between numbers, such as 1920x1080, will be converted to the times symbol. Negative numbers, such as -5 and minus signs between numbers such as 2 - 1, will have a minus sign instead of a hyphen. Degrees are reformatted to the degree symbol: - Cold, 37-degree F water. - A 45-degree angle. - A right angle's measure is 90 degrees. It doesn't reformat the word "degree" when not following digits: - Don't give me the third degree! - I have two degrees from MIT. "Smart quotes" are applied for double-quote marks based on position relative to whitespace: "a" b c a "b" c a b "c" a "b!" c a "b," c a "b". C a, "b" c a---"b"---c a ("b") c "error" ==> "correction" Inch or minute markers such as 3' 9" are not converted. Quotation marks in HTML attributes and in code blocks, e.g., `var x = "hello world"`, are not converted. Fenced Code Blocks ------------------------------------------------------------------------------ Set off large blocks of code using equal-length strings of tilde `~` or back-tick ` characters. Each produces a different CSS class so that they can be styled differently. By default, tilde blocks have lines before and after them and are inset for use as code listings instead of large inline code blocks. Both styles receive syntax coloring and automatic programming language detection.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
void insertion_sort(int data[], int length) {
    for (int i = 0; i < length; ++i) {
       ...
    }
}
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ void insertion_sort(int data[], int length) { for (int i = 0; i < length; ++i) { ... } } ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Alternative back-tick markup: ```````````````````````````````````` def insertionSort(data): for i in range(0, len(data)): j = i; while (j > 0) and (data[j] < data[j - 1]): temp = data[j] data[j] = data[j - 1] data[j] = temp --j ```````````````````````````````````` You can even have HTML in a code block: ```````````````````````````````````` Show this HTML as source, not code. ```````````````````````````````````` LaTeX and other languages that use dollar signs work fine inside code fences: ```````````````````````````````````` $ \int_0^1 x^2 dx $ $$$a = $$$e ```````````````````````````````````` ...and of course, Markdeep inside Markdeep: ```````````````````````````````````` - Do not - Format - this as a **list**! ```````````````````````````````````` Code listings may have captions: ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ def insertionSort(data): for i in range(0, len(data)): j = i; while (j > 0) and (data[j] < data[j - 1]): temp = data[j] data[j] = data[j - 1] data[j] = temp --j ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ [Listing [sort]: An insertion sort] ### Less-than Signs in Code ### #### Summary #### If you have trouble with less-than signs right next to capitalized letters in code blocks, do _one_ of the following: - Put spaces after angle brackets: `std::vector< Capitalized >` - Use HTML entity escapes: `std::vector<;Capitalized>;` - Wrap code examples in `...` - Wrap your whole document in `...` You don't need to do this for legal HTML or XML in code blocks. #### Details #### Less-than and greater-than signs are allowed in code blocks (as well as anywhere else in Markdeep), and will be handled correctly if they are followed by a whitespace character. Likewise, legal HTML and XML are correctly processed as code when in code blocks. However, because browsers interpret "`<`" _immediately followed by_ a character as an HTML tag, less-than signs without a following space must be formatted more carefully in shell scripts and languages such as C++ and Java. If the character following the less-than sign is lower-case, for example in: "`std::vector`", then no consideration is needed. If the character following less-than is a capital letter, then the browser will automatically make it lower case. If the following character is a slash, then the browser will interpret it as a stray tag and automatically remove it. If you care most about being able to read your document in a browser when the markdeep.js script is not available (due to no local copy and no Internet connection), then either use surrounding whitespace or use HTML entity codes to avoid incorrect processing of less-than signs. **Reformatted Examples:** ~~~~~~~~~~~~~~~~~~~~ ls array; std::vector array; ~~~~~~~~~~~~~~~~~~~~ If care more about not having to reformat your code examples, then just include them in preformatted ` ~~~~~ You can also include your entire document in a preformatted script block to avoid the need for marking up each code (and inline code) example. Diagrams -------------------------------------------------------------------------------- Diagrams can be inserted alongside, as in this **************************** example, or between paragraphs of text as shown * .---------. * below. * | Server |<------. * * '----+----' | * The diagram parser leaves symbols used as labels * | | * unmodified, so characters like > and ( can appear * | DATA CYCLE | * inside of the diagram. In fact, any plain text * v | * may appear in the diagram. In addition to labels, * .-------. .----+----. * any un-beautified text will remain in place for * | Security| | File | * use as ASCII art. Thus, the diagram is rarely * | Policy +->| Manager | * distored by the beautification process. * '-------' '---------' * **************************** ************************************************************************************************* *.-------------------. ^ .---. * *| A Box |__.--.__ __.--> | | | * *| | '--' v | | * *'-------------------' | | * * Round *---(-. | * * .-----------------. .-------. .----------. .-------. | | | * * | Mixed Rounded | | | / Diagonals \ | | | | | | * * | & Square Corners | '--. .--' / \ |---+---| '-)-' .--------. * * '--+------------+-' .--. | '-------+--------' | | | | / Search / * * | | | | '---. | '-------' | '-+------' * * |<---------->| | | | v Interior | ^ * * ' <---' '----' .-----------. ---. .--- v | * * .------------------. Diag line | .-------. +---. \ / . | * * | if (a > b) +---. .--->| | | | | Curved line \ / / \ | * * | obj->fcn() | \ / | '-------' |<--' + / \ | * * '------------------' '--' '--+--------' .--. .--. | .-. +Done?+-' * * .---+-----. | ^ |\ | | /| .--+ | | \ / * * | | | Join | | Curved | \| |/ | | \ | \ / * * | | +----> | '-' Vertical '--' '--' '-- '--' + .---. * * '---+-----' | | | 3 | * * v not:line 'quotes' .-' '---' * * .---+--------. / A || B *bold* | ^ * * | Not a dot | <---+---<-- A dash--is not a line v | * * '---------+--' / Nor/is this. --- * ************************************************************************************************* Diagram Examples ================================================================================ Lines with Decorations -------------------------------------------------------------------------------- ************************************************************************************************* * ________ o * * .--------------. * * *---+--. | | o o | ^ \ / | .----------. | * * | | '--* -+- | | v / \ / | | <------. | | * * | '-----> .---(---' --->*<--- / .+->*<--o----' | | | | | * * <--' ^ ^ | | | | | ^ \ | '--------' | | * * \/ *-----' o |<----->| '-----' |__| v '------------' | * * /\ *---------------' * ************************************************************************************************* Graph with Large Nodes -------------------------------------------------------------------------------- ************************************************************************************************* * * * .---. .-. .-. .-. .-. * * | A +----->| 1 +<---->| 2 |<----+ 4 +------------------. | 8 | * * '---' '-' '+' '-' | '-' * * | ^ | ^ * * v | v | * * .-. .-+-. .-. .-+-. .-. .+. .---. * * | 3 +---->| B |<----->| 5 +---->| C +---->| 6 +---->| 7 |<---->| D | * * '-' '---' '-' '---' '-' '-' '---' * ************************************************************************************************* Graph with Small Nodes -------------------------------------------------------------------------------- ************************************************************************************************* * A 1 2 4 8 * * *----->o<---->o<----o-----------. o * * ^ ^ | ^ * * | | | | * * v | v | * * o<--->*<---->o---->*---->o---->o<---->* * * 3 B 5 C 6 7 D * ************************************************************************************************* Flow Chart -------------------------------------------------------------------------------- ************************************************************************************************* * . * * .---------. / \ * * | START | / \ .-+-------+-. ___________ * * '----+----' .-------. A / \ B | |COMPLEX| | / \ .-. * * | | END |<-----+CHOICE +----->| | | +--->+ PREPARATION +--->| X | * * v '-------' \ / | |PROCESS| | \___________/ '-' * * .---------. \ / '-+---+---+-' * * / INPUT / \ / * * '-----+---' ' * * | ^ * * v | * * .-----------. .-----+-----. .-. * * | PROCESS +---------------->| PROCESS |<------+ X | * * '-----------' '-----------' '-' * ************************************************************************************************* Line Ends -------------------------------------------------------------------------------- ************************************************************************************************* * * * o--o *--o / / * o o o o o * * * * o o o o * * * * o o o o * * * * * * o--* *--* v v ^ ^ | | | | | | | | \ \ \ \ \ \ \ \ / / / / / / / / * * o--> *--> * o / / o * v ' o * v ' o * v \ o * v \ o * v / o * v / * * o--- *--- * * ^ ^ ^ ^ . . . . ^ ^ ^ ^ \ \ \ \ ^ ^ ^ ^ / / / / * * | | * o \ \ * o | | | | | | | | \ \ \ \ \ \ \ \ / / / / / / / / * * v v ^ ^ v v ^ ^ o * v ' o * v ' o * v \ o * v \ o * v / o * v / * * * o | | * o \ \ * * * * <--o <--* <--> <--- ---o ---* ---> ---- *<-- o<-- -->o -->* * * * ************************************************************************************************* Tests for some tough cases: ************************************************ * +-+ \ \ | / / * * + + \ v v v / * * +-+ \ .---------. / \ | / * * v| |v vvv * * +-+ --->| |<--- -->o<-- * * | | ^| |^ ^^^ * * +-+ / '---------' \ / | \ * * / ^ ^ ^ \ * * / / | \ \ * ************************************************ Trees -------------------------------------------------------------------------------- ************************************************************************************************* * * * . . . .--- 1 .-- 1 / 1 * * / \ | | .---+ .-+ + * * / \ .---+---. .--+--. | '--- 2 | '-- 2 / \ 2 * * + + | | | | ---+ ---+ + * * / \ / \ .-+-. .-+-. .+. .+. | .--- 3 | .-- 3 \ / 3 * * / \ / \ | | | | | | | | '---+ '-+ + * * 1 2 3 4 1 2 3 4 1 2 3 4 '--- 4 '-- 4 \ 4 * * * ************************************************************************************************* Circuits -------------------------------------------------------------------------------- ************************************************************************************************* * ____ * * * | |_____.---. | * * o _____| )----------)-------. * * / \ | '---' | __|__ * * /___\ | | \ / * * | '-------------. | \ / * * A ----------------' | | o * * .-------------------. o-----)-------' | * * | |___.---. | |___.---. * * B ---*---.__.---. ___| )--*--.__..---. ____) )----- Y * * __| o----*--' '---' ______)) )---' '---' * * C -------' '---' | | ''---' * * | o * * | / \ * * | /___\ * * | | * * '--------------' * ************************************************************************************************* Big Shapes -------------------------------------------------------------------------------- ************************************************************************************************* * * * .---------. . .-------. .-------. .---------. .-----. .----. * * \ / / \ \ \ | | | | / \ / \ * * \ / / \ \ \ | | | | / \ | | * * \ / / \ \ \ | | | | \ / | | * * \ / / \ \ \ | | | | \ / \ / * * ' '---------' '-------' '-------' '---------' '-----' '----' * * * ************************************************************************************************* Small Shapes -------------------------------------------------------------------------------- ************************************************************************************************* * .---. __ .. * * .--. . .-----. \ / .---. .---. ___ ___ | | | ) * * / \ / \ \ / .-. . ' . | | .---. .---. | | / \ | | '--' '' * * \ / / \ \ / | | / \ / \ '---' / / \ \ | | \___/ |___| .. __ * * '--' '-----' ' '-' '---' /___\ '---' '---' '---' ( | |__| * * '' * ************************************************************************************************* Overlaps and Intersections -------------------------------------------------------------------------------- ************************************************************************************************* * * * .-. .-. .-. .-. .-. .-. * * | | | | | | | | | | | | * * .---------. .--+---+--. .--+---+--. .--| |--. .--+ +--. .------|--. * * | | | | | | | | | | | | | | | | | | * * '---------' '--+---+--' '--+---+--' '--| |--' '--+ +--' '--|------' * * | | | | | | | | | | | | * * '-' '-' '-' '-' '-' '-' * ************************************************************************************************* Big Grids -------------------------------------------------------------------------------- ************************************************************************************************* * .----. .----. * * / \ / \ .-----+-----+-----. * * + +----+ +----. | | | | .-----+-----+-----+-----+ * * \ / \ / \ | | | | / / / / / * * +----+ B +----+ + +-----+-----+-----+ +-----+-----+-----+-----+ * * / \ / \ / | | | | / / / / / * * + A +----+ +----+ | | B | | +-----+-----+-----+-----+ * * \ / \ / \ +-----+-----+-----+ / / A / B / / * * '----+ +----+ + | | | | +-----+-----+-----+-----+ * * \ / \ / | A | | | / / / / / * * '----' '----' '-----+-----+-----' '-----+-----+-----+-----+ * * * ************************************************************************************************* Small Grids -------------------------------------------------------------------------------- ************************************************************************************************* * ___ ___ .---+---+---+---+---. .---+---+---+---. .---. .---. * * ___/ \___/ \ | | | | | | / \ / \ / \ / \ / | +---+ | * * / \___/ \___/ +---+---+---+---+---+ +---+---+---+---+ +---+ +---+ * * \___/ b \___/ \ | | | b | | | \ / \a/ \b/ \ / \ | +---+ | * * / a \___/ \___/ +---+---+---+---+---+ +---+---+---+---+ +---+ b +---+ * * \___/ \___/ \ | | a | | | | / \ / \ / \ / \ / | a +---+ | * * \___/ \___/ '---+---+---+---+---' '---+---+---+---' '---' '---' * * * ************************************************************************************************* Tiny Grids -------------------------------------------------------------------------------- ************************************************************************************************* * ┌─┬─┬─┬─┬─┐ ▉▉ ▉▉ ▉▉ ⬢ ⬡ ⬡ ┌┬┬┬┬┬┬┬┬┐ ⁚⁚⁚⁚⁚⁚⁚⁚⁚⁚ ___________ +-+-+-+-+ * * ├─┼─┼─┼─┼─┤ ▉▉ ▉▉ ⬢ ⬢ ⬡ ⬡ ├┼┼┼┼┼┼┼┼┤ ⁚⁚⁚⁚⁚⁚⁚⁚⁚⁚ |__|__|__|__| +-+-+-+-+ * * ├─┼─┼─┼─┼─┤ ▉▉ ▉▉ ▉▉ ⬢ ⬢ ⬢ ⬡ ⬡ ├┼┼┼┼┼┼┼┼┤ ⁚⁚⁚⁚⁚⁚⁚⁚⁚⁚ |__|__|__|__| +-+-+-+-+ * * ├─┼─┼─┼─┼─┤ ▉▉ ▉▉ ⬡ ⬡ ⬡ ⬡ ├┼┼┼┼┼┼┼┼┤ ⁚⁚⁚⁚⁚⁚⁚⁚⁚⁚ |__|__|__|__| +-+-+-+-+ * * └─┴─┴─┴─┴─┘ ▉▉ ▉▉ ▉▉ ⬡ ⬡ ⬡ └┴┴┴┴┴┴┴┴┘ ⁚⁚⁚⁚⁚⁚⁚⁚⁚⁚ |__|__|__|__| +-+-+-+-+ * ************************************************************************************************* Dot Grids -------------------------------------------------------------------------------- ************************************************************************************************* * * * o o o o o * * * * * * * o o * o o o * * * o o o · * · · · · · · * * o o o o o * * * * * o o o o * o o o o * * * * * o * * · * * · · · · · · * * o o o o o * * * * * o * o o o o o o o o * * * * * o o o o o · o · · o · · * * · * * o o o o o * * * * * o * o o o o o o o * * * * o * o o · · · · o · · * · * * o o o o o * * * * * * * * * o o o o * * * o * o · · · · · · · * * * * ************************************************************************************************* Unicode in Diagram -------------------------------------------------------------------------------- ************************************************************************************************* * ↖ ↗ ✶ ✹ ✩ ⓵ ⎲ ░░▒▒▓▓▉▉ ▚▚ ▢ ▢ ⬚ ⬚ ⊕ * * ▲ ◀━━━━━━━▶ ↙ ↘ ➊ ❶ ➀ ① ➕ ➖ ➗ ❌ ⎳ ╲ ╱ ▚▚ ▢ ▢ ⬚ ⬚ ⊖ * * ┃ ╭╌╌╌╌╌╌╌╮ ╔═══════╗ ┏━━━━━━━┓ ┏╍╍╍╍╍╍╍┓ ╲ ╱ ░░▒▒▓▓▉▉ ▚▚ ⬣ ⬣ ⎔ ⎔ ⊗ * * ┃ ╎ ╎ ║ ║ ┃ ┃ ╏ ╏ ⎛ ⎧ ⎡ ╳ ░░▒▒▓▓▉▉ ▚▚ ⬣ ⬣ ⎔ ⎔ ⊘ * * ┃ ╎ ╎ ║ ║ ┃ ┃ ╏ ╏⋮ ⎜ ⎨ ⎢ ╱ ╲ ░░▒▒▓▓▉▉ ▚▚ ◯ ◯ ⏣ ⏣ ⊙ * * ▼ ╰╌╌╌╌╌╌╌╯ ╚═══════╝ ┗━━━━━━━┛ ⋱ ┗╍╍╍╍╍╍╍┛⋮ ⎝ ⎩ ⎣╱ ╲ ░░▒▒▓▓▉▉ ▚▚ ◯ ◯ ⏣ ⏣ ⊛ * * ⋱ ⋮ ◢▉▉◣ ⊜ * * ∑xᵢ ∫t²dt ⋱ ⋮ ◥▉▉◤ * ************************************************************************************************* Graphics Diagram ------------------------------------------------------------------------------- ************************************************************************************************* * . * * 0 3 P * Eye / ^ / * * *-------* +y \ +) \ / Reflection * * 1 /| 2 /| ^ \ \ \ v * * *-------* | | v0 \ v3 --------*-------- * * | |4 | |7 | *----\-----* * * | *-----|-* +-----> +x / v X \ .-.<-------- o * * |/ |/ / / o \ | / | Refraction / \ * * *-------* v / \ +-' / \ * * 5 6 +z v1 *------------------* v2 | o-----o * * v * ************************************************************************************************* Icon Diagram -------------------------------------------------------------------------------- ************************************************************************************************* * .-. .--------. * * .-+ | | | * * .--+ '--. |'--------'| * * | Server Cloud |<------------------>| Database | * * '-------------' | | * * ^ ^ '--------' * * Internet | | ^ * * .------------------------' '-------------. | * * | | v * * v v .------. .------. * * .--------. WiFi .--------. Bluetooth .-----. / # # /| / # # /| * * | |<------------->| |<---------->| | +------+/| LAN +------+/| * * |Windows | | OS X | | iOS | | +/|<--->| +/| * * +--------+ +--------+ | | |Ubuntu+/| |Ubuntu+/| * * /// ____ \\\ /// ____ \\\ | o | | +/ | +/ * * '------------' '------------' '-----' '------' '------' * * Laptop 1 Laptop 2 Tablet 1 Dedicated Server Rack * ************************************************************************************************* Horizontal Rules ------------------------------------------------------------------------------------ The following are all produced by different patterns in the source: ----- - - - _____ _ _ _ ***** * * * Embedded Math ======================== Markdeep automatically includes [MathJax](http://mathjax.org) if your document contains equations and you have an Internet connection. That means you get the **full power of LaTeX, TeX, MathML, and AsciiMath notation**. Just put math inside single or double dollar signs. $$ \Lo(X, \wo) = \Le(X, \wo) + \int_\Omega \Li(X, \wi) ~ f_X(\wi, \wo) ~ | \n \cdot \wi | ~ d\wi $$ You can also use LaTeX equation syntax directly to obtain numbered equations: \begin{equation} e^{i \pi} + 1 = 0 \end{equation} \begin{equation} \mathbf{A}^{-1}\vec{b} = \vec{x} \end{equation} If you don't have equations in your document, then Markdeep won't connect to the MathJax server. Either way, it runs MathJax after processing the rest of the document, so there is no delay. Markdeep is smart enough to distinguish non-math use of dollar signs, such as $2.00 and $4.00, US$5, and 3$. Inline math requires spaces (or punctuation) either inside or outside of the LaTeX dollar signs to distinguish them them from regular text usage. Thus, the following all work: - $x^2$ - $ x^2 $ - ($x^2$) - ($ x^2 $) - Variable $x^2$, - Variable $ x^2 $ Unless you've changed out the default MathJax processor, you can define your own LaTeX macros by executing `\newcommand` within dollar signs, just as you would in LaTeX. Markdeep provides a handful of commands defined this way by default because they're things that I frequently need: Code | Symbol -------------------|------------ `\O(n)` | $\O(n)$ `\mathbf{M}^\T` | $\mathbf{M}^\T$ `45\degrees` | $45\degrees$ `x \in \Real` | $x \in \Real$ `x \in \Integer` | $x \in \Integer$ `x \in \Boolean` | $x \in \Boolean$ `x \in \Complex` | $x \in \Complex$ `\n` | $\n$ `\w` | $\w$ `\wo` | $\wo$ `\wi` | $\wi$ `\wh` | $\wh$ `\Li` | $\Li$ `\Lo` | $\Lo$ `\Lr` | $\Lr$ `\Le` | $\Le$ # ATX Headers In addition to the underlined headers, you can also use ATX-style headers, with multiple # signs: ## H2 ### H3 #### H4 ##### H5 ###### H6 Although: do you really need six levels of subsection nesting?! Custom Formatting ========================================================================= Markdeep uses CSS for styling. That means you can embed a style sheet to override anything thatn you don't like about the built-in styling. For example, if you don't want section numbering, just use: ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Markdeep uses Markdown's syntax, even where I disagree with the choices. But you aren't stuck with that. Do you wish that Markdown had specified single-asterisk for `*bold*`? You can have that: ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Each of the list bullets (`+`, `-`, `*`) has its own CSS class. You can use this, for example, to make `+` entries bold and `-` ones use a circle: ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Unicode (in UTF-8 encoding) =================================================== To support Unicode input, you must add <`meta charset="utf-8"`> to the *top* of your document (in the first 512 bytes). - Asian characters 林花謝了春紅 太匆匆, 無奈朝來寒雨 晚來風 胭脂淚 留人醉 幾時重, 自是人生長恨 水長東 - Asian punctuation: 、。!,: - Matching pairs «»‹›“”‘’〖〗【】「」『』〈〉《》〔〕 - Greek ΑΒΓΔ ΕΖΗΘ ΙΚΛΜ ΝΞΟΠ ΡΣΤΥ ΦΧΨΩ αβγδ εζηθ ικλμ νξοπ ρςτυ φχψω - Currency ¤ $ ¢ € ₠ £ ¥ - Common symbols © ® ™ ² ³ § ¶ † ‡ ※ - Bullets •◦ ‣ ✓ ●■◆ ○□◇ ★☆ ♠♣♥♦ ♤♧♡♢ - Phonetic ᴁ ᴂ ᴈ - Music ♩♪♫♬♭♮♯ - Punctuation “” ‘’ ¿¡ ¶§ª - ‐ ‑ ‒ – — ― … - Accents àáâãäåæç èéêë ìíîï ðñòóôõö øùúûüýþÿ ÀÁÂÃÄÅ Ç ÈÉÊË ÌÍÎÏ ÐÑ ÒÓÔÕÖ ØÙÚÛÜÝÞß - Math ° ⌈⌉ ⌊⌋ ∏ ∑ ∫ ×÷ ⊕ ⊖ ⊗ ⊘ ⊙ ⊚ ⊛ ∙ ∘ ′ ″ ‴ ∼ ∂ √ ≔ × ⁱ ⁰ ¹ ² ³ ₀ ₁ ₂ π ∞ ± ∎ - Logic & Set Theory ∀¬∧∨∃⊦∵∴∅∈∉⊂⊃⊆⊇⊄⋂⋃ - Relations ≠≤≥≮≯≫≪≈≡ - Sets ℕℤℚℝℂ - Arrows ←→↑↓ ↔ ↖↗↙↘ ⇐⇒⇑⇓ ⇔⇗ ⇦⇨⇧⇩ ↞↠↟↡ ↺↻ ☞☜☝☟ - Computing ⌘ ⌥ ‸ ⇧ ⌤ ↑ ↓ → ← ⇞ ⇟ ↖ ↘ ⌫ ⌦ ⎋⏏ ↶↷ ◀▶▲▼ ◁▷△▽ ⇄ ⇤⇥ ↹ ↵↩⏎ ⌧ ⌨ ␣ ⌶ ⎗⎘⎙⎚ ⌚⌛ ✂✄ ✉✍ - Digits ➀➁➂➃➄➅➆➇➈➉ - Religious and cultural symbols ✝✚✡☥⎈☭☪☮☺☹☯☰☱☲☳☴☵☶☷ - Dingbats ❦☠☢☣☤♲♳⌬♨♿ ☉☼☾☽ ♀♂ ♔♕♖ ♗♘♙ ♚♛ ♜♝♞♟ Differences from Other Markdown =================================================== Features --------------------------------------------------- There are many, inconsistent markdown variants. Markdeep intentionally differs from a few of them in specific ways: - Code blocks require fences; no indent-only code blocks. I think that was a poor choice in the original markdown specification because code vs. blockquote is ambiguous in plain text - No bold/italic/strikethrough inside of words without spaces because they could form an equation or technical term. Just use HTML tags. - Setext headers require at least three minus or equals characters to distinguish from multiline equations - Whitespace required in ATX headers (disambiguates "#1" from a header; required by CommonMark) - Markdeep's table reference syntax differs from MultiMarkdown's in order to provide a consistent formatting syntax across sections, figures, and tables...and one for which the source text is more readable. Temporary Limitations --------------------------------------------------- Future releases likely will address these known bugs, limitations, and "missing features": - Paragraphs not allowed in lists - No dashed lines in diagrams. Because there's no plain-text floating-dot character, different ASCII diagram styles use different, ambiguous conventions. - No support for smart quotes Permanent Limitations --------------------------------------------------- Due to the special protection from formatting that Markdeep affords `
` and `` tags that appear in the document, you cannot nest
a code tag inside of another code tag, and likewise for pre tags.