|
|
(12 intermediate revisions by the same user not shown) |
Line 1: |
Line 1: |
| Markdown is short-form HTML. There are several flavours with different featuresets.
| | A markup language that produces [[HTML]].<br> |
| | Originally released in 2004 has seen several variations/flavours with different features/semantics.<br> |
| | Most modern markdown parsers now adhere to the [https://spec.commonmark.org/ commonmark spec]. |
|
| |
|
| {{ TODO | | | = Documentation = |
| These are old, bad, ugly. fixme }}
| | <blockquote> |
| | {| class="wikitable" |
| | |- |
| | | CommonMark Spec || https://spec.commonmark.org/ |
| | |- |
| | | Original markdown docs || https://daringfireball.net/projects/markdown/syntax |
| | |- |
| | |} |
| | </blockquote><!-- Documentation --> |
|
| |
|
| = Notes = | | = Notes = |
Line 21: |
Line 31: |
| | [[ruby redcarpet]] | | | [[ruby redcarpet]] |
| |- | | |- |
| | [[ruby github flavoured markdown]] | | | [[c sundown]] |
| |-
| |
| |}
| |
| </blockquote><!-- Parsers -->
| |
| | |
| = Syntax =
| |
| | |
| <blockquote>
| |
| {| class="wikitable"
| |
| |-
| |
| | <pre>
| |
| //title as seen and goto link
| |
| [Complicated Algebra][compAlgebra]
| |
| | |
| //create your headers
| |
| ## Complicated Algebra [compAlgebra]
| |
| </pre> || || Cross References (Same-Page links) ||
| |
| |-
| |
| | <pre># Header1
| |
| ## Header2
| |
| ### Header3 </pre> || || Headers || <h1 id="header1">Header1</h1> <h2 id="header2">Header2</h2> <h3 id="header3">Header3</h3>
| |
| |-
| |
| | <pre>> Indent
| |
| >> Indent2</pre> || || Indent1, Indent 2 || <blockquote> <p>Indent</p> <blockquote> <p>Indent2</p> </blockquote> </blockquote>
| |
| |-
| |
| | <pre>*italic*, _italic_</pre> || || Italics || <p><em>italics</em></p>
| |
| |-
| |
| | <pre>**bold**, __bold__</pre> || || Bold || <p><strong>bold</strong></p>
| |
| |-
| |
| | <pre>* bullet list
| |
| | |
| Second Paragraph
| |
| | |
| Third Paragraph
| |
| | |
| * bullet list 2</pre> || || Bullet List || <ul><li><p>bullet list</p><p>Second Paragraph</p><p>Third Paragraph</p></li><li><p>bullet list 2</p></li></ul>
| |
| |-
| |
| | <pre>1. Red
| |
| 2. Green
| |
| 3. Blue</pre> || || Numbered list || <ol> <li>Red</li> <li>Blue</li> <li>Green</li> </ol>
| |
| |-
| |
| | <pre><http://www.ign.com></pre> || || link || <p><a href="http://www.ign.com">http://www.ign.com</a></p>
| |
| |-
| |
| | <pre>fact number one [Google][1]. Also see [Reference][2].
| |
| Let's not forget about the [Special Case][MSN].
| |
| | |
| | |
| [1]: http://www.google.com/
| |
| [2]: http://www.wikipedia.com/
| |
| [MSN]: http://msn.com/</pre> || || Reference style links || <p>fact number one <a href="http://www.google.com/">Google</a>. Also see <a href="http://www.wikipedia.com/">Reference</a>.Let's not forget about the <a href="http://msn.com/">Special Case</a>.</p>
| |
| |-
| |
| | <pre>![alt-text](/path/to/img.jpg)
| |
| ![alt-text][ImageID]
| |
| | |
| | |
| [ImageID]: http://www.image.com/image.png</pre> || || Images ||
| |
| |- | | |- |
| | <pre>`this is code wrapping`</pre> || || Code Formatting || <p><code>this is code wrapping</code></p> | | | [[c soldout]] |
| |- | | |- |
| | <pre><p align="right"> my writing </p></pre> || || Aligned writing || <p align="right"> modify text-alignment </p> | | | [[c hoedown]] |
| |- | | |- |
| | <pre>
| |
| ``` bash
| |
| for f in *.txt; do echo "---f"; done
| |
| ```
| |
| </pre> || || Code Block || <syntaxhighlight lang="bash">
| |
| for f in *.txt; do echo "---f"; done
| |
| </syntaxhighlight>
| |
| |} | | |} |
| | | </blockquote><!-- Parsers --> |
| | |
| </blockquote><!-- Syntax --> | |
| | |
| = Workflow =
| |
| <blockquote>
| |
| | |
| {{ WARNING |
| |
| This is really out of date
| |
| }}
| |
| | |
| === Overview ===
| |
| Personal Script automatically generates .html files every time a .md file
| |
| is saved in vim.
| |
| <pre>
| |
| ### Pipeline
| |
| vim
| |
| Markdown-Syntax
| |
| autolaunch convert-markdown.py on save *.md
| |
| | |
| python2
| |
| pip
| |
| pygments
| |
| markdown2
| |
| markdown
| |
| py-markdown-ditaa
| |
| | |
| python-markdown.py
| |
| pers: markdown-converter.py
| |
| pers: markdownToc.py
| |
| | |
| chromium
| |
| Tincr (extension reloads page when files change CSS+html)
| |
| To use:
| |
| open page in chromium
| |
| Menu > Tools > Developer Tools
| |
| Click Tincr Tab
| |
| Done. Next save should automatically reload
| |
| | |
| ~OR~
| |
| | |
| firefox
| |
| autoReload (reloads page when files change CSS+html)
| |
| | |
| | |
| | |
| </pre>
| |
| | |
| | |
| === python setup ===
| |
| <pre>
| |
| ### install markdown2.py
| |
| pip install markdown2 #for (fork)markdown 2 (no longer using)
| |
| pip install markdown #for (official) markdown
| |
| pip install pygments #for syntax highlighting support
| |
| | |
| | |
| ### Official Use:
| |
| python2 markdown2.py myFile.md > myFile.html
| |
| | |
| | |
| | |
| ### Personal Use (markdown2-converter.py)
| |
| # creates html of same name in same dir, using variable DEFAULT_CSS_PATH for css
| |
| python2 markdown2-converter.py myFile.md
| |
| python2 markdown-converter.py myFile.md
| |
| | |
| # can also specify html name, location, css file
| |
| python2 markdown2-converter.py myFile.md C:/path/to/style.css C:/myFile.html
| |
| python2 markdown-converter.py myFile.md C:/path/to/style.css C:/myFile.html
| |
| | |
| | |
| # use any variety of paths
| |
| python2 markdown2-converter.py myFile.md C:/file.md C:/something/style.css D:/web/web.html
| |
| python2 markdown-converter.py myFile.md C:/file.md C:/something/style.css D:/web/web.html
| |
| </pre>
| |
| | |
| | |
| === vim setup ===
| |
| <pre>
| |
| :PluginInstall Markdown-Syntax
| |
| </pre>
| |
| <pre>
| |
| ### .vimrc
| |
| au BuffRead,BufNewFile *.md set filetype=markdown
| |
| | |
| | |
| if has("unix")
| |
| autocmd BufWritePost *.md silent !$progs/python/general/markdown/markdown2-converter.py <afile>
| |
| elseif has("win32")
| |
| autocmd BufWritePost *.md silent ! P:\Python27\Scripts\python.exe \%progs\%/python/general/markdown/markdown-converter.py <afile> silent
| |
| endif
| |
| | |
| | |
| Plugin 'Markdown-syntax'
| |
| </pre>
| |
| | |
| === Firefox ===
| |
| <pre>
| |
| ### Install autoReload extension (reloads automatically when files are updated)
| |
| firefox file.md
| |
| | |
| #(nothing else required, page reloads entirely by itself!)
| |
| </pre>
| |
| | |
| | |
| | |
| | |
| === MathJax ===
| |
| | |
| Mathjax was a pain to setup last time, and it was a paint to sync. I also deleted it once
| |
| by mistake, and it took a fair amount of reading to get it working again, so I'll document it's
| |
| use specifically for use with markdown here:
| |
| <pre>
| |
| ####### Using Mathjax CDN (requires online) ##########
| |
| ### HTML (already coded in markdown-converter.py):
| |
| <!--mathjax-->
| |
| <script type="text/x-mathjax-config">
| |
| MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}});
| |
| </script>
| |
| <script type="text/javascript"
| |
| src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
| |
| </script>
| |
| </head>
| |
| </pre>
| |
| | |
| | |
| <pre>
| |
| ### Use in markdown:
| |
| single '$'s or '\(' and '\)' ------- Inline LaTeX (single line)
| |
| anything between '$$'s ------- Displayed LaTeX (standard)
| |
| | |
| | |
| | |
| | |
| ## Inline Code Example:
| |
| When $a \ne 0$, there are two solutions to \(ax^2 + bx + c = 0\) and they are
| |
| | |
| ## Displayed Code Example:
| |
| When $a \ne 0$, there are two solutions to \(ax^2 + bx + c = 0\) and they are
| |
| </pre>
| |
| | |
| | |
| | |
| === ditaa ===
| |
| the ditaa package for python-markdown is not included in pip, and requires a manual
| |
| installation.
| |
| | |
| ''' Install Java: '''
| |
| Portable version available (see jportable).
| |
| Portable or not, must add bin directory to %PATH%
| |
| can test with: <pre>java -version</pre>
| |
| | |
| | |
| ''' Install ditaa: '''
| |
| I have ditaa installed in my python site-packages directory. Only planning to use with
| |
| python-markdown.
| |
| Test with: <pre>java -jar ditaa0.9.jar --help</pre>
| |
| | |
| | |
| ''' Next, install script: '''
| |
| Find markdown's extension location:
| |
| <pre>
| |
| ## Typically P:\Python27\lib\site-packages\markdown
| |
| python2 -c "import markdown; print markdown.__path__[0]"
| |
| </pre>
| |
| | |
| download and install mdx_ditaa.py to <pre>site-packages/markdown</pre> or above location
| |
| | |
| | |
| </blockquote><!-- plugins -->
| |
| | |
| = CSS Styles =
| |
| <blockquote>
| |
| Note that all colours (including the syntax highlighting called on by pygments)
| |
| must be present in the CSS stylesheet or they will not appear.
| |
| | |
| === Colors ===
| |
| http://www.color-hex.com/color-wheel/
| |
| | |
| === Fonts ===
| |
| http://www.w3schools.com/cssref/css_websafe_fonts.asp
| |
| | |
| === Syntax Highlighting themes: ===
| |
| https://github.com/richleland/pygments-css
| |
| | |
| === General Appearance themes: ===
| |
| https://github.com/jasonm23/markdown-css-themes #Click on sample html pages, links at top to view more than just 3 listed
| |
| | |
| | |
| </blockquote><!-- CSS Styles -->
| |