Skip to content

Latest commit

 

History

History
845 lines (612 loc) · 27.8 KB

md_evaluation.md

File metadata and controls

845 lines (612 loc) · 27.8 KB

See: 004.55_Markdown-CLI-Evaluation

Contents

Heading Anchor: id afterCodeMonospaceListsTables (extension)LinksImagesVideo LinkInline HTMLMathematicsMathematics (GitHub/GitLab)EntitiesFontsSVG (labels) • XcodeObservations
Resources

Note: Pandoc markdown_strict appears to only recognized one title line at the top of file.

Heading Anchors <a id="name-"></a><sup>[▴](#contents)</sup>

Note: Discount, Hoedown, MacDown & Pandoc can all work with <a id="name-"></a><sup>[▴](#contents)</sup> after the heading. Pandoc does not render line as header if <a id=_></a> line preceeds the header line.

####<a id="idBefore" \></a> H4: `id=` same line, before header.
#### H4: `id=` same line, after header. <sup>[](#contents)</sup> <a id="id-after-"></a>
#### H4: USE THIS APPROACH. `<a id="id-after-"></a><sup>[▴](#contents)</sup> `<a id="id-after-"></a><sup>[](#contents)</sup>

H4: USE THIS APPROACH. <a id="id-after-"></a><sup>[▴](#contents)</sup>

Blank Line Before Header

parser directive comment
discount
hoedown not required
macdown not required
pandoc blank_before_header Pandoc Markdown extension requires blank before header.
Some text.
### H3 - no blank line before header
#### H4 - no blank line before header
##### H5 - no blank line before header
###### H6 - no blank line before header

Some text.

H3 - no blank line before header

H4 - no blank line before header

H5 - no blank line before header
H6 - no blank line before header

Header Attributes {#indentifier .class key=value}

parser directive comment
discount - not supported
hoedown - not supported
macdown - not supported
pandoc header_attributes Pandoc Markdown extension …
### Some Header {#indentifier .class key=value}

Some Header {#anchor .class key=value}

Header Trailing #

### Some Header with `###` on both sides. ###

Some Header with ### on both sides.

Horizontal Rule



Horizontal Rule: at least three asterisks, underscores, or hyphens. Put empty line before and after.


Inline Formatting

Italics emphasis brackets with single asterisks (cmd-i) or single underscores. Strong bold emphasis brackets with double asterisks (cmd-b) or double underscores. Mixed emphasis can be can be nested. Strikethrough is bracketed with two tildes.

If intra_letter_emphasis is not enabled, then _ and * are are unmodified in a name or equation a=b*c.

Option name (enabled) Syntax Result if enabled
Emphasis, Italic _ So Amazing
Emphasis, Italic * So Amazing
Emphasis, Strong __ So Amazing
Emphasis, Strong ** So Amazing
Emphasis, IntraWord A*maz*ing Amazing (complicates equations. Discount, Pandoc: always enabled)
Emphasis, IntraWord A_maz_ing A_maz_ing (complicates some names. Hoedown, MacDown:does not separately control _, *)
Strikethrough ~~ Much wow
Option name (disabled) Syntax Result if enabled
Highlight == ==So good== (Hoedown, MacDown)
Quote " "If enabled, " becomes <q>. (Hoedown, MacDown: not smarty pants compatible)"
Subscript H~2~0 H20 is water (Pandoc)
Superscript 2^3^ 2^3^ is 8 (Pandoc)
Superscript hoge^(fuga) hoge^(fuga) (Discount , Hoedown, MacDown)
Underline _ If enabled, underline overrides _ Italic Emphasis
Option name <html> Result if enabled
Emphasis <em> Amazing
Highlight <mark> So good
Quote <q> Such editor
Strikethrough <del> Much wow
Superscript <sup> hogefuga
Underline <u> So doge

Block Quotes

Blockquotes use > similar to email reply text.

Nested line in the same quote. Pandoc & MacDown show next line break.

N0-BREAK SPACE : U+00A0 &nbsp;. Directly type char into code segments.

Code

Inline code has single back-ticks around it.

// JavaScript
var s = "JavaScript syntax highlighting";
alert(s);
Triple tilde ~ or back-ticks creates a <pre><code> block.
No language indicated. No syntax highlighting.
# bash
$ ls -alx
$ pwd
// ANSI C
a = b + c;
for (int i=0; i<n; n++) {}
<dict>
    <key>Message</key>
    <string>Greetings.</string>
    <key>Type</key>
    <integer>0</integer>
</dict>
<p>Example html paragraph</p>

markdown: <pre><code class="c"> (discount). Note: markdown deliniate html the code fences. To show html, use <pre><code class="language-html"> with escaped angle brackets &gt; &lt; for the enclosed example code. hoedown: <pre><code class="language-c">
pandoc: <pre class="c"><code> using --no-highlight option with fenced_code_attributes flag enabled

Languages: actionscript apacheconf applescript bash (sh) c coffeescript cpp (c++) css fortran git go groovy handlebars html http ini java javascript (js) json latex less markdown matlab objectivec (objc) pascal perl php python ruby sql swift xml

Note: class="language-xyz" is html5 recommended.

Monospace

Monospace 120

123456789*123456789*123456789*123456789*123456789*123456789*123456789*123456789*123456789*123456789*123456789*123456789*

Portrait 64

123456789*123456789*123456789*123456789*123456789*123456789*1234

Landscape 85

123456789*123456789*123456789*123456789*123456789*123456789*123456789*123456789*12345

Lists

Example ordered list

  1. First ordered list item

  2. Another item

    • Unordered sub-list.
  3. Actual numbers don't matter, just that it's a number

    1. Ordered sub-list
      1. Sub-sub-list
  4. And another item.

    Properly (4-space) indented paragraph. Blank line above. At least one leading space.

    Two trailing spaces creates a linebreak. ..
    Note that this line is separate, but within the same paragraph.

Example alpha list - Discount only.

A. First ordered list item
B. Another item
C. Actual numbers don't matter, just that it's a number

Example unordered list:

  • Unordered list can use asterisks
  • Or - minuses
  • Or + pluses

Tables (extension)

Pandoc: table_captions, simple_tables, multiline_tables, grid_tables, pipe_tables

NOTE: Pandoc pipe_tables uses ---- separator length for both relative column widths and overall table width.

Colons can be used to align columns. The outer pipes (|) are optional. Needs at least 3 dashes per column ---.

Tables Are Cool
zebra stripes alternate 120
column 2 centered 1230
column 3 1
| Tables        | Are           | Cool  |
| ------------- |:-------------:| -----:|
| zebra stripes | alternate     |   120 |
| column 2      | centered      |  1230 |
| column 3      ||     1 |

html <table>

Firstname Lastname
Points
Jill Smith 50
Eve Jackson 94

36

Table Size Test
10+2 10+2 10+2

66

Table Size Test
20+2 20+2 20+2

96

Table Size Test
30+2 . . . . . . . . . . . . . 30+2 . . . . . . . . . . . . . 30+2 . . . . . . . . . . . . .

126

Table Size Test
40+2 AAAA BBBB CCCC DDDD EEEE FFFF GGGG. 40+2 AAAA BBBB CCCC DDDD EEEE FFFF GGGG. 20+2 AAAA BBBB CCCC DDDD EEEE FFFF GGGG.

100%

Table Size Test
40+2 AAAA BBBB CCCC DDDD EEEE FFFF GGGG. 29 AAAA BBBB CCCC DDDD EEEE FFFF GGGG. 29 AAAA BBBB CCCC DDDD EEEE FFFF GGGG HHHH IIII JJJJ KKKK LLLL MMMM NNN OOOO PPPP.

Links

Autolink: http://t.co becomes <http://t.co> displayed as http://t.co

Footnotes1: inline [^4] & [^longnote] references [^4]: Some footnote text. & [^ longnote]: Some longnote text.

Here is an inline note.^[Inlines notes are easier to write, since you don't have to pick an identifier and move down to type the note.] Pandoc inline_notes only

mailto:[email protected] (Discount, Hoedown, MacDown, Pandoc)

inline link

Markdown Syntax ⇗

 [Link Description](http://site "title")
reference link

see Note 1
see MDN:Hover

 [see Note 1][Note1]  
 [see MDN:Hover][MDN:Hover]

 [Note1]: http://mozilla.org
 [MDN:Hover]: https://developer.mozilla.org/en-US/docs/Web/CSS/:hover
 [url_id]: http://example.com "Optional Title"
 [url_id]: http://example.com 'Optional Title'
 [url_id]: http://example.com (Optional Title)
 [url_id]: <http://example.com/> "Angle Brackets OK"
 [url_id]: http://example.com/some/long/url
     "Title With White Space Padding"

Link via id=""
Link via name=""

Link to here via id. HTML5 creates a JavaScript global for each id. name is obsolete in HTML5, but may work and also not create globals. id must be unique in the whole document. id can contain azAZ_-.

 [Link via id=""](#anchor21)
 <a id="anchor21"></a>Link to here via `id`.
 <p id="anchor21">Link to here via <code>id</code>.</p>

Link to here via a fragment <a> tag name attribute.

 [Link text via name=""](#anchor22)
 <a name="anchor22"></a>Link to here via name.

Markdown <http://example.com/> expands to HTML <a href="http://example.com/">http://example.com/</a>

Browser looks for absolute "server" path file:///Markdown_files/figure1.png

Images

Inline-style (HTTP)
alt text

![alt text](https://github.com/…/images/icon48.png "Title Text")

Inline-style (relative)
alt text
![alt text](md_evaluation_files/figure1.png "Title 1")

(relative, clickable)

[![alt text](md_evaluation_files/figure1.png "Title 1")]
(04.55_Markdown__QREF_files/figure1.png)

Reference-style (HTTP)
alt text

![alt text][logo] [logo]: https://github.com/…/images/icon48.png "Title 2"

Reference-style (relative)
alt text

 ![alt text][logo2]
 [logo2]: md_evaluation_files/figure2.png "Title 2"

-- Reference-style (relative, description=reference implicit)
logo3

 ![logo3]
 [logo3]: md_evaluation_files/figure3.png "Title 3"

HTML Style (Relative)

logo4

<p><img src="md_evaluation_files/figure4.png"
         alt="logo4"
       title="Title 4"
       width="256"
       height="96"></p>

Browser looks for relative "server" path file:///Users/~/Desktop/md_evaluation_files/figure3.png

Video Link

BOZEMAN VIDEO: Wave Amplitude

[![Text](path|url/p.jpg)](path|url/video)

Inline HTML

Definition list
Is something people use sometimes.
Markdown in HTML
Does *not* work inside **html block tags**. Use HTML tags.
This is an html <pre><code> block.
Name Column Column
A B C

BOZEMAN VIDEO: Wave Amplitude

Note: target="_blank" does not work in MacDown.

Mathematics

Baseline: use \\(, \\[, $, $$

markdown (discount) : $$, \(, \[. Note: a drawback of \(, \[ extension is that it precludes escaping ( and [. Note: markdown and hoedown are mutually exclusive.

hoedown : --math for \\(, \\[. --math-explicit for $, $$. (Note: "guessing by context" may generate unexpected output if --math is enabled, and --math-explicit is not enabled. --math-explicit also disables "guessing by context")

pandoc : +tex_math_double_backslash for \\(, \\[. +tex_math_dollars for $, $$. +tex_math_single_backslash \(, \[

Note: LaTeX inside <div> or <table><tr><td> html tags uses only single escape \(…\), \[…\]. Markdown inside <div> or <table><tr><td> html tags are not parsed as markdown. Also, <br> is needed for line breaks.

TeX Equations (MacDown, Atom:markdown-preview-plus)

\\(A^T_S = B\\) : \(A^T_S = B\)
\\[A^T_S = B\\] : \[A^T_S = B\]
\\(\sqrt{ab}\\) * : \(\sqrt{ab}\)
\\[\sqrt{ab}\\] * : \[\sqrt{ab}\]

$A^T_S = B$ : $A^T_S = B$
$$A^T_S = B$$ : $$A^T_S = B$$
$\sqrt{ab}$ : $\sqrt{ab}$
$$\sqrt{ab}$$ * : $$\sqrt{ab}$$

\(\sqrt{ab}\) : (\sqrt{ab})
\[\sqrt{ab}\] : [\sqrt{ab}]

The probability of getting k heads when flipping n coins is

Dollar syntax: $P(E) = {n \choose k} p^k (1-p)^{ n-k}$

$$P(E) = {n \choose k} p^k (1-p)^{ n-k}$$

Double backslash syntax: \(P(E) = {n \choose k} p^k (1-p)^{ n-k} \)

\[P(E) = {n \choose k} p^k (1-p)^{ n-k} \]

Single backslash syntax: (P(E) = {n \choose k} p^k (1-p)^{ n-k} )

[P(E) = {n \choose k} p^k (1-p)^{ n-k} ]

Note: LaTeX inline \(...\), LaTeX display \[...\], TeX shorthand inline $...$, TeX shorthand display $$...$$.

Maxwell’s Equations

$$...$$ syntax (multimarkdown fails get generate correct HTML LaTeX)

$$ \begin{aligned} \nabla \times \vec{\mathbf{B}} -, \frac1c, \frac{\partial\vec{\mathbf{E}}}{\partial t} & = \frac{4\pi}{c}\vec{\mathbf{j}} \ \nabla \cdot \vec{\mathbf{E}} & = 4 \pi \rho \\ \nabla \times \vec{\mathbf{E}}, +, \frac1c, \frac{\partial\vec{\mathbf{B}}}{\partial t} & = \vec{\mathbf{0}} \\ \nabla \cdot \vec{\mathbf{B}} & = 0 \end{aligned} $$

Note: markdown-preview-plus prefers light syntax highlights

Mathematics (GitHub/GitLab)

GitHub

This math is inline using $ : $\sqrt{3x-1}+(1+x)^2$

This math is inline using `$`: $\sqrt{3x-1}+(1+x)^2$

The Cauchy-Schwarz Inequality

$$\left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right)$$

GitHub expects a $$ math block at the start of a new line.

$$\left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right)$$

GitLab

Note: Math written in LaTeX syntax is rendered with KaTeX. KaTeX only supports a subset of LaTeX.

This math is inline using $ : $a^2+b^2=c^2$.

This math is inline using `$` : $a^2+b^2=c^2$.

This math is on a separate line using inline $$ : $$a^2+b^2=c^2$$

This math is on a separate line using inline `$$` : $$a^2+b^2=c^2$$

Entities

&utrif; … link to top table of contents
&neArr; North East Arrow … link to offsite

&uuarr; &upuparrows; &#x21C8; &#8648; … link top a topic level
&ddarr; &downdownarrows; &#x21CA; &#8650; … link down a topic

&rrarr; &rightrightarrows; &#x21C9; &#8649; … link to previous page
&llarr; &leftleftarrows; &#x21C7; &#8647; … link to next page

&#x27A4; … play media
&blacktriangleright; &rtrif; ... play media

&lozf; &blacklozenge; &#x29EB; &#10731;
&loz; &lozenge; &#x25CA; &#9674;

↗ &nearr;
◂ &blacktriangleft; &ltrif;
▾ &blacktriangdown; &dtrif;◹ &urtri;
⌒ &profline;
∠ &angle;
⁄ &frasl; fraction slash ⩘ &andslope; fraction slash

see: com.apple.CharacterPicker.plist
see also: com.apple.CharacterPaletteM.plist
see: _PROCESS_/KeyBoard/!FavoriteChars.txt

Fonts

'Andale Mono', 'DejaVu Sans Mono',

**Example: <table> with \(, \[ & $$ **

Given: \[r_A = 30\ \texttt{mm} \] \[r_E = 90\ \text{mm}\] $$r_A = r_B = r_C = r_D = 30\ \texttt{mm} = 0.03\ \texttt{m}$$
$$r_A = r_B = r_C = r_D = 30\ \texttt{mm} = 0.03\ \texttt{m}$$ \(r_A = 30\ \texttt{mm}\)
\(r_B = 30\ \texttt{mm}\)

Example: <span> with font styles

0123 Plain Italic Underline Bold

Example: <span> with \\(

Given: \\(r_A = r_B = r_C = r_D = 30\ \texttt{mm} = 0.03\ \texttt{m}\\) \\(r_E = 90\ \text{mm} = 0.09\ \text{m}\\) \\(\omega_e = 180\ \text{rpm}\\)

Example: <kbd> with \\(

Given: \\(r_A = r_B = r_C = r_D = 30 mm = 0.03 m\\) \\(r_E = 90 mm = 0.09\ m\\) \\(\omega_e = 180\ \text{RPR} = \\)

Example: <div> with \\( does not generally work. Pandoc markdown is OK. Pandoc markdown_strict may work with. use <span>

Given:
\(\omega_a = 90\ \text{rpm}\)
\(\omega_e = 180\ \text{rpm}\)

Given:
$\omega_a = 90\ \text{rpm}$
$\omega_e = 180\ \text{rpm}$

Given:
(\omega_a = 90\ \text{rpm})
(\omega_e = 180\ \text{rpm})

div heading

SVG

<rect> text

Pill Shape

Note: match svg width-height with rect width-height.

<svg width="120" height="22">
  <rect 
    width="120" height="22"
    rx="11" ry="11"
    fill="#eeddcc"
    stroke="#273135" stroke-opacity="0.12"
    stroke-width="1" 
    stroke-linejoin="round"/>
  <text
    fill="rgb(0, 0, 0)" 
    x="50%" y="53%" 
    dominant-baseline="middle" 
    text-anchor="middle"
    font-family="system-ui,Segoe UI,Helvetica,Arial,sans-serif"
    font-size="12"
    font-weight="600" 
    >Example Text</text>
</svg>
Example Text two words some words
  • Generate GitHub-style SVG labels: labl.es ⇗, github/bhousel/svg-labels ⇗
    • rect
      • verify svg and rect height-weight match
      • stroke is optional
    • text
      • replace x=… y=… with x="50%" y="53%"
      • add dominant-baseline="middle"
      • replace -apple-system,BlinkMacSystemFont with system-ui

![](https://labl.es/svg?text=celebrate&bgcolor=ffd479)
![](https://labl.es/svg?text=amazing%20service&bgcolor=22aaac)

md_evaluation_files/label_example_*.svg:

  • label_example_generated.svg :
  • label_example_modified.svg :
  • style="display:block;margin-left:auto;margin-right:auto;":

XCode

  1. Added Resources/ folder to the project.
  2. Set Build Phase rule for each *.md file
    1. Select Project Navigator > your project
    2. Select target > Build Phases
    3. Move (Drag & Drop) *.md files from Compile Sources to Copy Bundle Resources.

May be possible to add a Build Rules action script for *.md files

Observations

  • markdown (discount) and hoedown use mutually exclusive LaTeX syntax. markdown only uses a single backslash \. hoedown uses both double backslash \\ and dollar sign $

  • Except for LaTeX syntax, markdown (discount), hoedown and pandoc can be configured to produce similar output from the same input.

  • pandoc fenced code generates older <pre class="name"><code> instead of newer html5 recommended <pre><code="langauge-name">

  • auto_identifiers is unique to pandoc. May produce identifiers similar to ones created for a manually generated table of contents.

  • markdown (discount) fenced code does not work with html code. Neither tilde nor backslash code fences are properly converted to <pre><code> tags. Angle brackets <> are not converted to html entities &lt;&gt;.

Resources

W3: Character Entity Reference Chart ⇗
TeX Equation Editor ⇗

Footnotes

  1. You don't have to use a number. Arbitrary things like [^footy note4] and [^footy note4]: will also work. But they will render as numbered footnotes. Also, no need to keep your footnotes in order, I will sort out the order for you so they appear in the same order they were referenced in the text body. You can even keep some footnotes near where you referenced them, and collect others at the bottom of the file in the traditional place for footnotes.

    Subsequent paragraphs are indented to show that they belong to the previous footnote. Pandoc. Hoedown supports with return link in first paragraph.