Markdown: Difference between revisions

From wikinotes
No edit summary
Line 3: Line 3:
{{ TODO |
{{ TODO |
These are old, bad, ugly. fixme }}
These are old, bad, ugly. fixme }}
= Notes =
<blockquote>
{|
|-
| [[markdown syntax]]
|-
|}
</blockquote><!-- Notes -->
= Parsers =
<blockquote>
{|
|-
| [[ruby kramdown]]
|-
| [[ruby redcarpet]]
|-
| [[ruby github flavoured markdown]]
|-
|}
</blockquote><!-- Parsers -->


= Syntax =
= Syntax =
Line 15: Line 37:
//create your headers
//create your headers
## Complicated Algebra [compAlgebra]
## Complicated Algebra [compAlgebra]
</pre> || || Cross References (Same-Page links) ||  
</pre> || || Cross References (Same-Page links) ||
|-
|-
| <pre># Header1
| <pre># Header1
Line 54: Line 76:




[ImageID]: http://www.image.com/image.png</pre> || || Images ||  
[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>
| <pre>`this is code wrapping`</pre> || || Code Formatting || <p><code>this is code wrapping</code></p>
Line 75: Line 97:
<blockquote>
<blockquote>


{{ WARNING |  
{{ WARNING |
This is really out of date
This is really out of date
}}
}}
Line 95: Line 117:
   py-markdown-ditaa
   py-markdown-ditaa


python-markdown.py  
python-markdown.py
   pers: markdown-converter.py
   pers: markdown-converter.py
   pers: markdownToc.py
   pers: markdownToc.py
Line 101: Line 123:
chromium
chromium
   Tincr (extension reloads page when files change CSS+html)
   Tincr (extension reloads page when files change CSS+html)
   To use:  
   To use:
   open page in chromium
   open page in chromium
   Menu > Tools > Developer Tools
   Menu > Tools > Developer Tools
   Click Tincr Tab
   Click Tincr Tab
   Done. Next save should automatically reload
   Done. Next save should automatically reload
 
 
     ~OR~
     ~OR~


firefox  
firefox
   autoReload (reloads page when files change CSS+html)
   autoReload (reloads page when files change CSS+html)


Line 132: Line 154:
### Personal Use (markdown2-converter.py)
### Personal Use (markdown2-converter.py)
# creates html of same name in same dir, using variable DEFAULT_CSS_PATH for css
# creates html of same name in same dir, using variable DEFAULT_CSS_PATH for css
python2 markdown2-converter.py myFile.md  
python2 markdown2-converter.py myFile.md
python2 markdown-converter.py myFile.md
python2 markdown-converter.py myFile.md


# can also specify html name, location, css file
# can also specify html name, location, css file
python2 markdown2-converter.py myFile.md C:/path/to/style.css C:/myFile.html  
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  
python2 markdown-converter.py myFile.md C:/path/to/style.css C:/myFile.html




Line 156: Line 178:


if has("unix")
if has("unix")
   autocmd BufWritePost *.md silent !$progs/python/general/markdown/markdown2-converter.py <afile>  
   autocmd BufWritePost *.md silent !$progs/python/general/markdown/markdown2-converter.py <afile>
elseif has("win32")
elseif has("win32")
   autocmd BufWritePost *.md silent ! P:\Python27\Scripts\python.exe \%progs\%/python/general/markdown/markdown-converter.py <afile> silent
   autocmd BufWritePost *.md silent ! P:\Python27\Scripts\python.exe \%progs\%/python/general/markdown/markdown-converter.py <afile> silent
endif
endif




Line 214: Line 236:
=== ditaa ===
=== ditaa ===
the ditaa package for python-markdown is not included in pip, and requires a manual
the ditaa package for python-markdown is not included in pip, and requires a manual
installation.  
installation.


''' Install Java: '''
''' Install Java: '''
Line 223: Line 245:


''' Install ditaa: '''
''' Install ditaa: '''
I have ditaa installed in my python site-packages directory. Only planning to use with  
I have ditaa installed in my python site-packages directory. Only planning to use with
python-markdown.
python-markdown.
Test with: <pre>java -jar ditaa0.9.jar --help</pre>
Test with: <pre>java -jar ditaa0.9.jar --help</pre>

Revision as of 13:06, 19 September 2021

Markdown is short-form HTML. There are several flavours with different featuresets.

TODO:

These are old, bad, ugly. fixme

Notes

markdown syntax

Parsers

ruby kramdown
ruby redcarpet
ruby github flavoured markdown

Syntax

//title as seen and goto link
[Complicated Algebra][compAlgebra]

//create your headers
## Complicated Algebra [compAlgebra]
Cross References (Same-Page links)
# Header1
## Header2
### Header3 
Headers

Header1

Header2

Header3

> Indent
>> Indent2
Indent1, Indent 2

Indent

Indent2

*italic*, _italic_
Italics

italics

**bold**, __bold__
Bold

bold

* bullet list

 	Second Paragraph

 	Third Paragraph

* bullet list 2
Bullet List
  • bullet list

    Second Paragraph

    Third Paragraph

  • bullet list 2

1. Red
2. Green
3. Blue
Numbered list
  1. Red
  2. Blue
  3. Green
<http://www.ign.com>
link

<a href="http://www.ign.com">http://www.ign.com</a>

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/
Reference style links

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>.

![alt-text](/path/to/img.jpg)
![alt-text][ImageID]


[ImageID]: http://www.image.com/image.png
Images
`this is code wrapping`
Code Formatting

this is code wrapping

<p align="right"> my writing </p>
Aligned writing

modify text-alignment

``` bash
for f in *.txt; do echo "---f"; done
```
Code Block
for f in *.txt; do echo "---f"; done


Workflow


WARNING:

This is really out of date

Overview

Personal Script automatically generates .html files every time a .md file is saved in vim.

### 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)




python setup

### 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


vim setup

:PluginInstall Markdown-Syntax
### .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'

Firefox

### Install autoReload extension (reloads automatically when files are updated)
firefox file.md

#(nothing else required, page reloads entirely by itself!)



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:

####### 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>


### 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


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:

java -version


Install ditaa: I have ditaa installed in my python site-packages directory. Only planning to use with python-markdown.

Test with:

java -jar ditaa0.9.jar --help


Next, install script: Find markdown's extension location:

## Typically P:\Python27\lib\site-packages\markdown
python2 -c "import markdown; print markdown.__path__[0]"

download and install mdx_ditaa.py to

site-packages/markdown

or above location


CSS Styles

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