Sunday, January 31, 2016

Markdown Tips and Tricks



https://www.saplinglearning.com/ibiscms/help.php?file=advanced_markdown.html

Hyperlinked Images

The Enhancing Text With Markdown document gives instructions for creating web links and inserting images. It may not be obvious that these can be combined to create images that are also clickable links.
[the google search engine][google]
![the google logo][logo]
Above are a standard web link and image. By placing the image where the link text would be found you end up with this:
[![the google logo][logo]][google]
This line above, in combination with the following link definitions elsewhere in the document:
[logo]: http://www.google.com/images/logo.gif
[google]: http://www.google.com/ "click to visit Google.com"
combine to produce the following clickable image link (with tooltip if you hover over it):
the google logo



If you don’t want a URL to be automatically linked, you can remove the link by denoting the URL as code with tick marks.
`http://www.example.com`
https://www.eviltester.com/2018/07/freemind-scripting.html
write the slides in markdown
process the markdown in Marp to generate slides
process the markdown in Pandoc (via pandocifier) to create longer documentation

xmind - not free


Online markdown editors for note-taking
  • StackEdit – Recommended
  • HackMD – Basic for collaboration
Mac apps markdown editors for note-taking
  • Typora  – Recommended: Beautiful and intuitive 
  • Boostnote – Basic and working
Mac coding editor apps as Markdown editor for note-taking
  • Atom – Usable with markdown preview plus and mindmap packages
  • Visual Studio Code – Works with Markdown Preview Enhanced

  • Hexo – Install and run your blog framework with Markdown support. There is a learning curve involved here and it may be over the top for just a note-taking purpose
  • Jekyll – From text with markdown support to sites and blog on Github pages for free hosting.
More Markdown
https://www.evernote.com/shard/s461/client/snv?noteGuid=022be86e-1a3e-4836-b7ea-1f6055d1800b&noteKey=677ba48a7c1a754f47d9b5454ee71479&sn=https%3A%2F%2Fwww.evernote.com%2Fshard%2Fs461%2Fsh%2F022be86e-1a3e-4836-b7ea-1f6055d1800b%2F677ba48a7c1a754f47d9b5454ee71479&title=More%2BMarkdown

https://stackoverflow.com/questions/39422404/setting-bgcolor-in-markdown
<style type="text/css">
  body {
    background-color: #336655;
  }
</style>

<style type="text/css">

  .post-body {

    background-color: #336655;

    background-image: url("https://cdn.pixabay.com/photo/2016/07/10/11/55/cat-1507600_960_720.jpg");

    background-repeat: no-repeat;
  }
</style>


Embed Gists

https://stackoverflow.com/questions/24319505/how-can-one-display-images-side-by-side-in-a-github-readme-md/24320279#24320279
To your specific example it would look something like this:
Solarized dark             |  Solarized Ocean
:-------------------------:|:-------------------------:
![](https://...Dark.png)  |  ![](https://...Ocean.png)

https://www.chronicle.com/blogs/profhacker/markdown-the-syntax-you-probably-already-know/35295

https://brettterpstra.com/2015/08/24/write-better-markdown/
One overall problem in Markdown 1.0’s syntax is that it isn’t clear when you need blank lines to separate block-level constructs
https://www.markdownguide.org/extended-syntax/
You can align text in the columns to the left, right, or center by adding a colon (:) to the left, right, or on both side of the hyphens within the header row.
| Syntax      | Description | Test Text     |
| :---        |    :----:   |          ---: |
| Header      | Title       | Here's this   |
| Paragraph   | Text        | And more      |


To create a footnote reference, add a caret and an identifier inside brackets ([^1]). Identifiers can be numbers or words, but they can’t contain spaces or tabs. Identifiers only correlate the footnote reference with the footnote itself — in the output, footnotes are numbered sequentially.

Add the footnote using another caret and number inside brackets with a colon and text ([^1]: My footnote.). You don’t have to put footnotes at the end of the document. You can put them anywhere except inside other elements like lists, block quotes, and tables.

Don’t forget about spaces, either. A space after a list item delimiter (-*+, or 1.) is required by most processors, but a space after hashmarks in headlines usually isn’t. It looks better, though, and ensures universal compatibility.


As Gruber noted early on, nested lists are an exception to the never-too-much-whitespace rule. Blank lines between list items can be interpreted very differently between processors. Keep list items consecutive, but you can use blank lines above paragraphs within lists. Just follow the last paragraph immediately with another list item (or the end of the list).
* list item 1

    paragraph in list item 1
* list item 2
COPY
Empty lines in block quotes are handled differently between flavors as well. The most common way to make a multi-paragraph block quote is to use a greater than symbol on each blank line:

> paragraph one
>
> paragraph two
>> nested paragraph
>>


<kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>R</kbd

https://www.k15t.com/blog/2015/04/markdown-vs-rich-formatting-who-will-win-the-ultimate-text-processing-competition

Round #6: Images and Other Media Assets

Markdown: “OK, I admit it – embedding images into a plain text document format isn’t easy.” There are two different ways to do it:
  • Inline (within a paragraph): ![alt text](/path/to/img.jpg "title"), for example !Logo (/folder/logo.jpg "My Logo")
  • Reference-style[id]: url/to/image "Optional title attribute", for example [logo]: /folder/logo.jpg "My Logo"
  • Either place the URL after the link text, e.g. [link text](http://example.com/ “Title”),
  • or include it as a reference, with the ID placed behind the link text.”
https://tech.agilitynerd.com/maximize-and-minimize-code-blocks-in-revealjs-slide-shows.html
I threw together a little JavaScript to add "+" and "-" buttons next to each code section that maximizes/restores the code blocks for easier viewing during the presentation:


Sometimes it's desirable to have an element, like an image or video, stretch to consume as much space as possible within a given slide. This can be done by adding the .stretch class to an element as seen below:
<section>
 <h2>This video will use up the remaining space on the slide</h2>
    <video class="stretch" src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video>
</section>
https://en.support.wordpress.com/wordpress-editor/blocks/markdown-block/#writing-with-markdown
  1. In WP Admin, go to Jetpack → Settings → Writing.
  2. Under Composing click the button next to “Write posts or pages in plain-text Markdown syntax.”
https://en.support.wordpress.com/editors/#classic-editor
https://github.com/hakimel/reveal.js#full-setup
External Markdown

https://github.com/hakimel/reveal.js/issues/1227
for (var slide of document.getElementsByTagName('section')){
  if (!(slide.getAttribute('data-background') ||
        slide.getAttribute('data-background-video') ||
        slide.getAttribute('data-background-iframe'))){
    slide.setAttribute('data-background-iframe', 'background.html')
  }
}
https://www.raymondcamden.com/2012/07/23/Adding-a-background-image-to-a-revealjs-presentation
Set data-state="something" on a slide and "something" will be added as a class to the document element when the slide is open. This let's you apply broader style changes, like switching the background.
html.intro body {
background:url("images/raiders_warehouse.jpg");
background-position:center;
background-size: 100%;
}
https://bookdown.org/yihui/rmarkdown/ioslides-presentation.html#incremental-bullets

https://stackoverflow.com/questions/975264/how-do-i-set-an-html-class-attribute-in-markdown
https://www.npmjs.com/package/markdown-it-attrs
Add classes, identifiers and attributes to your markdown with {.class #identifier attr=value attr2="spaced value"} curly brackets, similar to pandoc's header attributes.
Headings can be assigned attributes using this syntax at the end of the line containing the heading text:
{#identifier .class .class key=value key=value}
Thus, for example, the following headings will all be assigned the identifier foo:
# My heading {#foo}

# header {.style-me}
paragraph {data-toggle=modal}

Output:

<h1 class="style-me">header</h1>
<p data-toggle="modal">paragraph</p>

Works with inline elements too:

paragraph *style me*{.red} more text
https://lornajane.net/posts/2016/switching-to-reveal-js-for-presentations
 // More info https://github.com/hakimel/reveal.js#configuration
 Reveal.initialize({
            history: true,
            progress: false,
            controls: false,
            center: false,
            slideNumber: true,
            transition: 'none',
            transitionSpeed: 'fast',
            width: 960,
            height: 540,
I found this StackOverflow question and added a footer using the linked example.

  • s to show the speaker notes in a new window, these show the current and next slides, the current time and the elapsed time - if you set up before you actually start talking, you can click on the time block to reset the timer. This also shows speaker notes but I don't use those.
  • arrow keys to move between slides
  • f to full-screen Chrome
  • b to black the screen
I'm also a Vimium user, which is a plugin that lets you use your web browser from the keyboard. I would like to find out how to detect reveal.js and disable vimium but for now I am just excluding the "f" and "b" keys in Vimium for the http://localhost:8000 that reveal.js usually runs on.
https://github.com/rajgoel/reveal.js-plugins

https://github.com/hakimel/reveal.js/wiki/Keyboard-Shortcuts
  • NSPACE: Next slide
  • P: Previous slide
  • H: Navigate left
  • L: Navigate right
  • K: Navigate up
  • J: Navigate down
  • Home: First slide
  • End: Last slide
  • B.: Pause (Blackout)
  • F: Fullscreen
  • ESCO: Slide overview / Escape from full-screen
  • S: Speaker notes view
  • ?: Show keyboard shortcuts
  • alt + click: Zoom in. Repeat to zoom back out.
https://github.com/hakimel/reveal.js/blob/master/js/reveal.js
https://medium.com/myplanet-musings/building-a-responsive-reveal-js-theme-399179632cc6
Reveal.initialize({
    width: "100%",
    height: "100%",
    margin: 0,
    minScale: 1,
    maxScale: 1
});

embedded: false,
https://github.com/hakimel/reveal.js#theming
https://stackoverflow.com/questions/30988306/level-1-and-level-2-slides-in-reveal-js-using-pandoc
The reveal.js framework allows a 2D setup: grouping of slides within slide subsets "vertically", and grouping of the slide subsets horizontally. In markdown, it can be achieved like this:
# Head1

## Below 1

text below 1

## Below 2

text below 2

# Head 2

https://pandoc.org/MANUAL.html#producing-slide-shows-with-pandoc
The document is carved up into slides according to the following rules:
  • A horizontal rule always starts a new slide.
  • A heading at the slide level always starts a new slide.
  • Headings below the slide level in the hierarchy create headings within a slide.
  • Headings above the slide level in the hierarchy create “title slides,” which just contain the section title and help to break the slide show into sections. Non-slide content under these headings will be included on the title slide (for HTML slide shows) or in a subsequent slide with the same title (for beamer).
  • A title page is constructed automatically from the document’s title block, if present. (In the case of beamer, this can be disabled by commenting out some lines in the default template.)

https://github.com/jgm/pandoc/wiki/Using-pandoc-to-produce-reveal.js-slides
pandoc -t revealjs -s -o myslides.html myslides.md -V revealjs-url=https://revealjs.com
https://stackoverflow.com/questions/22194261/embedding-entire-reveal-js-presentation-inside-a-div
You can't do that with a div. What you describe sounds exactly like what iframes are useful for.
<iframe width="400" height="400" marginheight="0" marginwidth="0" src="/your/reveal/slideshow.html">
  Fallback text here for unsupporting browsers, of which there are scant few.
</iframe>
markdown to google slide
https://github.com/gsuitedevs/md2googleslides
md2gslides slides.md

Slide
https://github.com/gnab/remark/wiki/Markdown
A line containing three dashes, represents a slide separator (not a horizontal rule, <hr />, like in regular Markdown). Thus, a simple Markdown text like the one below represents a slideshow with two slides:
# Slide 1
This is slide 1
---
# Slide 2
This is slide 2

Incremental Slides

To avoid having to duplicate content if a slide is going to add to the previous one, using only two dashes to separate slides will make a slide inherit the content of the previous one:
# Slide

- bullet 1
--

- bullet 2


A line containing three question marks, represents a separator of content and note of the slide:

# Slide

Some content.

???
Some note.
A notes open version of a slide show can be shared by sharing the url with #p1 appended. Such as remarkjs.com/#p1.

With the highlightLines configuration option enabled, lines prefixed with * will get highlighted with a yellow background, which can be handy for bringing attention to specific parts of code snippets, i.e.:
Implicit return statement:

```ruby
def add(a,b)
*  a + b
end

# Notice how there is no return statement.
  • Strikethrough: ~~your text~~
    • your text
  • Inline code: surround your text with backtick symbols `
    • you code
https://guides.github.com/features/mastering-markdown/

Inline code

I think you should use an
`<addr>` element here instead.

Task Lists

- [x] @mentions, #refs, [links](), **formatting**, and <del>tags</del> supported
- [x] list syntax required (any unordered or ordered list supported)
- [x] this is a complete item
- [ ] this is an incomplete item

Inline `code` has `back-ticks around` it.



YouTube Videos


They can't be added directly but you can add an image with a link to the video like this:

<a href="http://www.youtube.com/watch?feature=player_embedded&v=YOUTUBE_VIDEO_ID_HERE
" target="_blank"><img src="http://img.youtube.com/vi/YOUTUBE_VIDEO_ID_HERE/0.jpg" 
alt="IMAGE ALT TEXT HERE" width="240" height="180" border="10" /></a>


https://stackoverflow.com/questions/33023349/atom-disable-single-key-binding
  1. Open settings with File > Settings
  2. Click Keybindings
  3. Filter the list by typing ctrl-alt-= in the search box.
  4. Click the clipboard icon next to the shortcut. This will copy the shortcut definition to your clipboard.
  5. Click the hyperlinked text your keymap file.
  6. Paste in the contents of the clipboard.
  7. Replace 'pane:increase-size' with the value 'unset!'

Keymap

  • How to disable key binding
    • Click the clipboard to copy the shortcut definition in Keybindings settings
    • replace the function to unset! to remove it or change it to another function

Solve the conflict between jumpy:toggle and markdown-preview-enhanced:run-code-chunk

'.editor[data-grammar*="gfm"], .editor[data-grammar*="md"], .editor[data-grammar*="markdown"]':
  'shift-enter': 'jumpy:toggle'
https://stackoverflow.com/questions/12145232/create-an-automatically-numbered-list
That should happen automatically (at least in SO flavored MD):
  1. test 1
  2. test 2
The code I used it:
1. test 1
1. test 2
The same works for GitHub flavored MD: https://gist.github.com/3489721
https://imagemagick.org/script/download.php
sudo port install ImageMagick

https://blog.github.com/2014-04-28-task-lists-in-all-markdown-documents/
- [ ] Mercury
- [x] Venus
- [x] Earth (Orbit/Moon)

https://markdown-here.com/
Write your email in Markdown, then make it pretty.
Hashify: Read about it at http://hashify.me/
Socrates: Read about it at http://socrates.io/

Some blog platforms, such as Tumblr, have an editor that supports writing in Markdown.
Another option is to use static site generators such as Jekyll, Octopress, or nanoc. This way we can transform plain text files into static web pages and blogs.


reveal.js: Check this out at http://lab.hakim.se/reveal-js/
deck.js: Check this out at http://imakewebthings.com/deck.js/
In reveal.js, each section represents one slide, so we can write slides in plain text using Markdown:

<section data-markdown>
    <script type="text/template">
        ## Page title

        A paragraph with some text and a [link](http://hakim.se).
    </script>
</section>

<section data-markdown>
    <script type="text/template">
        ## New slide

        Presentations made **easy**
    </script>
</section>

For the two top-level headers (the <h1> and <h2> tags), there is a special syntax that can be used:

Header 1
========

Header 2
--------

Pandoc
       By default, pandoc produces a document fragment.  To produce a standalone document (e.g.  a valid HTML file including <head> and <body>), use the -s or --standalone flag:
       The format of the input and output can be specified explicitly using command-line options.  The input format can be specified using the -f/--from option, the output format using the -t/--to option.  Thus, to

https://stackoverflow.com/questions/30880200/pandoc-what-are-the-available-syntax-highlighters
pandoc --bash-completion

If --bash-completion works, then put this line towards the end of your ${HOME}/.bashrc file (on Mac OS X or Linux -- doesn't work on Windows yet):

eval "$(pandoc --bash-completion)"



  pandoc --list-highlight-styles



  pandoc --list-highlight-languages



  pandoc --list-input-formats
  pandoc --list-output-formats
  pandoc --list-extensions

Once you decided which style was the closest to your need, you can output its theme file, using (for instance for pygments, the default style):
pandoc --print-highlight-style pygments
so that you can store this style in a file, using, e.g.,
pandoc --print-highlight-style pygments > my_style.theme

pandoc my_file.md --highlight-style my_style.theme -o doc.html

https://github.com/benweet/stackedit/issues/285
The postID can be found in the URL of the pencil icon at the bottom of a post when it is viewed at blogger.com, if you are logged in as the blog's owner.
You can sync Markdown documents to Google Drive from within Stack Edit for backup or export them to GoogleDocs as fully-formatted files. These exported files can then be further edited and shared in Google Docs like native files, allowing you to start writing in Markdown but share fully-formatted files. The export is a one-way process, unfortunately. Edits you make in Google Docs won’t be ported back into your Markdown file.

You can use gdocs2md, an open-source Google Docs script that converts files from Google Docs format to Markdown

Markdown allows you to include raw HTML
To insert inline code, we wrap it with backticks (`and`):
Type `echo 'Hello World'` in your terminal

The embedding of pre-formatted code blocks is possible by indenting every line of the block with four spaces or one tab:

    echo 'Hello World'

https://stackoverflow.com/questions/20303826/highlight-bash-shell-code-in-markdown
Rendered on GitHub, console makes the lines after the console blue. bashsh, or shell don't seem to "highlight" much ...and you can use posh for PowerShell or CMD.
Pandoc
       By default, pandoc produces a document fragment.  To produce a standalone document (e.g.  a valid HTML file including <head> and <body>), use the -s or --standalone flag:
       The format of the input and output can be specified explicitly using command-line options.  The input format can be specified using the -f/--from option, the output format using the -t/--to option.  Thus, to
https://stackoverflow.com/questions/23811002/from-markdown-to-pdf-how-to-change-the-font-size-with-pandoc
-V fontsize=12pt
For new users of pandoc (like myself), as an alternative to specifying variables with the -V flag, you can add them to the YAML metadata block of the markdown file. To change the fontsize, prepend following to your markdown document.
---
fontsize: 12pt
---
Works with fontsize 10,11, and 12. In addition to the comments on John MacFarlane's answer, there is some good info on specifying additional fontsizes with latex in this article (inline latex can be used in pandoc markdown documents being converted to pdf).
If you want to go bigger than 12pt you can use the extsizes package. Was already pre installed for me, so this worked out of the box with pandoc:
---
documentclass: extarticle
fontsize: 14pt
---

…
Possible sizes are 8pt, 9pt, 10pt, 11pt, 12pt, 14pt, 17pt, 20pt.

If you use --standalone 

you'll get a style tag with a link. 

If you use --self-contained 

you'll get a data: URL. 
http://pandoc.org/MANUAL.html#extension-yaml_metadata_block

Extension: yaml_metadata_block

A YAML metadata block is a valid YAML object, delimited by a line of three hyphens (---) at the top and a line of three hyphens (---) or three dots (...) at the bottom. A YAML metadata block may occur anywhere in the document, but if it is not at the beginning, it must be preceded by a blank line. <<



https://www.javacodegeeks.com/2016/03/converting-markdown-pdf-docx-pandoc.html

Pandoc is able to merge multiple Markdown files into a single PDF document. To generate a single PDF document out of two Markdown files you can use:
1pandoc -s -o doc.pdf part01.md part02.md
By default the page margins in the resulting PDF document are quite large. You can change this by passing a margin parameter:
1pandoc -s -V geometry:margin=1in -o documentation.pdf part01.md part02.md
http://pandoc.org/MANUAL.html#linked-media

Extension: backtick_code_blocks

Same as fenced_code_blocks, but uses backticks (`) instead of tildes (~).

https://gist.github.com/atelierbram/09c8fb742f1518f09ff9e4338ab8f7fb
  pandoc -f markdown -t html5 -o output.html input.md -c style.css

https://stackoverflow.com/questions/12311344/pandoc-converting-markdown-to-html-syntax-highlighter
You don't need an external extension. Just be sure to use the -s flag so you get a standalane HTML file with the CSS needed for highlighting. You can also use the --highlight-style option to adjust the coloring scheme

https://stackoverflow.com/questions/6695439/how-to-link-to-a-named-anchor-in-multimarkdown
In standard Markdown, place an anchor <a name="abcd"></a> where you want to link to and refer to it on the same page by [link text](#abcd).
(This uses name= and not id=, for reasons explained in this answer.)
Remote references can use [link text](http://...#abcd) of course.
This works like a dream, provided you have control over the source and target texts. The anchor can even appear in a heading, thus:
### <a name="head1234"></a>A Heading in this SO entry!
https://www.toketaware.com/makeslides/

https://pandoc.org/MANUAL.html#producing-slide-shows-with-pandoc
By default, the slide level is the highest header level in the hierarchy that is followed immediately by content, and not another header, somewhere in the document. In the example above, level 1 headers are always followed by level 2 headers, which are followed by content, so 2 is the slide level. This default can be overridden using the --slide-level option.
The document is carved up into slides according to the following rules:
  • A horizontal rule always starts a new slide.
  • A header at the slide level always starts a new slide.
  • Headers below the slide level in the hierarchy create headers within a slide.
  • Headers above the slide level in the hierarchy create “title slides,” which just contain the section title and help to break the slide show into sections.
  • Content above the slide level will not appear in the slide show.
  • A title page is constructed automatically from the document’s title block, if present. (In the case of beamer, this can be disabled by commenting out some lines in the default template.)

https://www.infoworld.com/article/3186253/application-development/coders-heres-a-javascript-presentation-tool-youll-love.html
https://github.com/gnab/remark/issues/363

https://rmarkdown.rstudio.com/beamer_presentation_format.html

https://www.chronicle.com/blogs/profhacker/markdown-slideshow-example-pandoc/46683
Pandoc has built-in support for the conversion of markdown (and a range of other simple text markup) into several browser friendly slideshow formats. These include DZSlidesS5Slidy, and Slideous (if you know LaTeX, beamertoo). Many of these offer a shortcut to display a table of contents and Slideous offers a shortcut to easily change the font size.
pandoc -t FORMAT -s habits.txt -o habits.html
where FORMAT is either s5slidyslideousdzslides, or revealjs.
https://github.com/jgm/pandoc/wiki/Using-pandoc-to-produce-reveal.js-slides

brew install pandoc
pandoc -f markdown -t latex hello.txt
To convert hello.html from HTML to Markdown:
pandoc -f html -t markdown hello.html
To produce a PDF slide show using beamer, type
pandoc -t beamer habits.txt -o habits.pdf
Note that a reveal.js slide show can also be converted to a PDF by printing it to a file from the browser.
To produce a Powerpoint slide show, type
pandoc habits.txt -o habits.pptx

http://aiyanbo.github.io/md-ppt/player.html
  1. 打开播放器程序 http://aiyanbo.github.io/md-ppt/player.html
  2. 将 markdown 文件拖入 "Drop markdown file" 框中
https://daringfireball.net/projects/markdown/
https://gitpitch.com/
https://github.com/gnab/remark/issues/30

  1. remove <textarea id="source"> ... </textarea>
  2. Use the code above in place of the existing code at the bottom: <script> var slideshow = remark.create(); </script>
$ cd MarkdownFolder
$ python -m SimpleHTTPServer
Now, a webserver will be running on port 8000 on your machine, accessable via http://localhost:8000. If MarkdownFolder contains your index.html and index.markdown files, you can go to http://localhost:8000/index.html without having to bother with the --allow-file-access-from-filesoption you found
https://remarkjs.com/#1


To render your Markdown-based slideshow on the fly, checkout Remarkise.
  • Markdown formatting, with smart extensions
  • Presenter mode, with cloned slideshow view
  • Syntax highlighting, supporting a range of languages

Slide properties, for naming, styling and templating slides

Content classes, for styling specific content

Syntax highlighting, supporting a range of languages
Initial lines containing key-value pairs are extracted as slide properties:
name: agenda
class: middle, center
# Agenda
The name of this slide is {{ name }}.

Pressing P will toggle presenter mode.


Creating a cloned view of your slideshow lets you:

Move the cloned view to the extended display visible to the audience

Put the original slideshow in presenter mode

Navigate as usual, and the cloned view will automatically keep up with the original

Pressing C will open a cloned view of the current slideshow in a new browser window.
https://github.com/gnab/remark/wiki/Markdown#slide-properties

Incremental Slides

To avoid having to duplicate content if a slide is going to add to the previous one, using only two dashes to separate slides will make a slide inherit the content of the previous one:
# Slide

- bullet 1
--

- bullet 2
https://pandoc.org/

Gaia theme
Marp uses the horizontal ruler to create multi-page slides. A --- between empty lines splits the presentation into slides. This format is similar to Deckset.

Marp’s Markdown has extended directives to affect slides. Insert HTML comment as <!-- {directive_name}: {value} -->
Show example.md 

You can resize slides with the Global Directive $size. Insert <!-- $size: 16:9 --> if you want to display slides on 16:9 screen. That’s all!
<!-- $size: 16:9 -->
$size directive supports 4:316:9A0-A8B0-B8 and the -portraitsuffix.
Marp also supports $width and $height directives to set a custom size.

You want pagination? Insert <!-- page_number: true --> at the top.
If you want to exclude the first page number, move the directive to after the first ruler.
# First page

The page number `1` is not shown.

---
<!-- page_number: true -->

# Second page

The page number `2` is shown!
https://stackoverflow.com/questions/24887301/is-there-a-syntax-for-links-with-no-text-in-markdown

AUTOMATIC LINKS

Markdown supports a shortcut style for creating “automatic” links for URLs and email addresses: simply surround the URL or email address with angle brackets. What this means is that if you want to show the actual text of a URL or email address, and also have it be a clickable link, you can do this:
<http://example.com/>

https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet#tables
| Tables        | Are           | Cool  |
| ------------- |:-------------:| -----:|fF
| col 3 is      | right-aligned | $1600 |
https://stackoverflow.com/questions/17536216/create-table-without-header-in-markdown/39322697#39322697
markdown table without header
If you don't mind wasting a line by leaving it empty, then can live with the following hack as of now. (As I said it is a hack, and use this only if you don't like adding any additional plugins)
| | | |
|-|-|-|ff
| Normal Key| Value1 |
|__BoldKey__| Value2 |


https://stackoverflow.com/questions/37575916/how-to-markdown-nested-list-items-in-bitbucket

Use 4 spaces

----------------
# using 4 spaces
----------------

# Unordered list

* Item 1
* Item 2
* Item 3
    * Item 3a
    * Item 3b
    * Item 3c

target="_blank"
https://gist.github.com/shaunlebron/746476e6e7a4d698b373
also causes line break.
http://markdown-guide.readthedocs.io/en/latest/basics.html#line-return
Creating simple lists is done by using plus, hyphens or asterisks as list markers. These list markers are interchangeable.
Markdown:
+ One
- Two
* Three
Nest a list requires you to indent by exactly four spaces.
Markdown:
+ One
+ Two
+ Three
    - Nested One
    - Nested Two
A paragraph is one or more consecutive lines of text separated by one or more blank lines. Normal paragraphs should not be indented with spaces or tabs.


To force a line return, place two empty spaces at the end of a line.
Inline-style links use parentheses immediately after the link text.
Markdown:
This is an [example link](http://example.com/).
This is an [example link](http://example.com/ "With a Title").
https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet

http://reeoo.me/archives/markdown.html
  1. 专注于你写作的内容本身,而不是排版样式。
  2. 可以导出 HTML、PDF 和本身的 .md 文件。
  3. 纯文本内容,兼容所有的文本编辑器与字处理软件。
  4. 随时修改你的文章版本,不必像字处理软件生成若干文件版本导致混乱。
  5. 可读、直观、学习成本低。
文章内容较多时,可以用标题分段:
# 标题1
## 标题2
### 标题3
#### 标题4
##### 标题5
###### 标题6

粗体和斜体

*斜体文本*  或者  _斜体文本_
**粗体文本**   或者 __粗体文本__
***粗斜体文本***  或者  ___粗斜体文本___

文字链接 Reeoo’s Blog
网址链接 http://reeoo.me
文字链接 [链接名称](http://链接网址)
网址链接 <http://链接网址>
高级链接技巧
这个链接用 me 作为网址变量 [ReeooMe][me]
这个链接用 co 作为网址变量 [ReeooCo][co]
然后在文档的结尾为变量赋值(网址)
[me]: http://reeoo.me/
[co]: http://reeoo.co/
普通无序列表
- 列表文本前使用 [减号+空格]
+ 列表文本前使用 [加号+空格]
* 列表文本前使用 [星号+空格]

普通有序列表
1. 列表前使用 [数字+空格]
2. 我们会自动帮你添加数字
7. 不用担心数字不对,显示的时候我们会自动把这行的 7 纠正为 3

普通引用
> 引用文本前使用 [大于号+空格]
> 折行可以不加,新起一行都要加上哦

引用里嵌套引用
语法:
> 最外层引用
> > 多一个 > 嵌套一层引用
> > > 可以嵌套很多层

引用里嵌套列表
语法:
> - 这是引用里嵌套的一个列表
> - 还可以有子列表
>     * 子列表需要从 - 之后延后四个空格开始


跟链接的方法区别在于前面加了个感叹号 !,这样是不是觉得好记多了呢?
语法:![图片名称](http://图片网址)
当然,你也可以像网址那样对图片网址使用变量
这个链接用 me 作为网址变量 [Reeoo's Blog][me].
然后在文档的结尾位变量赋值(网址)
[me]: http://img.reeoo.me/compass/add.jpg
分隔符
如果你有写分割线的习惯,可以新起一行输入三个减号-。当前后都有段落时,请空出一行:
写法:
前面的段落

---

后面的段落

表格

表格是我觉得 Markdown 比较累人的地方,例子如下:


1
2
3
4
5
| Tables        | Are           | Cool  |
|:------------- |:-------------:| -----:|
| col 3 is      | right-aligned | $1600 |
| col 2 is      | centered      |   $12 |
| zebra stripes | are neat      |    $1 |

如果你只想高亮语句中的某个函数名或关键字,可以使用 `function_name()` 实现(function_name())
通常编辑器根据代码片段适配合适的高亮方法,但你也可以用 ``` 包裹一段代码,并指定一种语言


1
2
3
$(function () {
    console.log('reeoo.me');
});

支持的语言:actionscriptapachebashclojurecmakecoffeescriptcppcscssddelphidjangoerlang,gohaskellhtmlhttpinijavajavascriptjsonlispluamarkdownmatlabnginxobjectivecperl,phppythonrrubyscalasmalltalksqltexvbscriptxml
也可以使用 4 空格缩进,再贴上代码,实现相同的的效果
nodeppt:用markdown写ppt

Labels

Review (572) System Design (334) System Design - Review (198) Java (189) Coding (75) Interview-System Design (65) Interview (63) Book Notes (59) Coding - Review (59) to-do (45) Linux (43) Knowledge (39) Interview-Java (35) Knowledge - Review (32) Database (31) Design Patterns (31) Big Data (29) Product Architecture (28) MultiThread (27) Soft Skills (27) Concurrency (26) Cracking Code Interview (26) Miscs (25) Distributed (24) OOD Design (24) Google (23) Career (22) Interview - Review (21) Java - Code (21) Operating System (21) Interview Q&A (20) System Design - Practice (20) Tips (19) Algorithm (17) Company - Facebook (17) Security (17) How to Ace Interview (16) Brain Teaser (14) Linux - Shell (14) Redis (14) Testing (14) Tools (14) Code Quality (13) Search (13) Spark (13) Spring (13) Company - LinkedIn (12) How to (12) Interview-Database (12) Interview-Operating System (12) Solr (12) Architecture Principles (11) Resource (10) Amazon (9) Cache (9) Git (9) Interview - MultiThread (9) Scalability (9) Trouble Shooting (9) Web Dev (9) Architecture Model (8) Better Programmer (8) Cassandra (8) Company - Uber (8) Java67 (8) Math (8) OO Design principles (8) SOLID (8) Design (7) Interview Corner (7) JVM (7) Java Basics (7) Kafka (7) Mac (7) Machine Learning (7) NoSQL (7) C++ (6) Chrome (6) File System (6) Highscalability (6) How to Better (6) Network (6) Restful (6) CareerCup (5) Code Review (5) Hash (5) How to Interview (5) JDK Source Code (5) JavaScript (5) Leetcode (5) Must Known (5) Python (5)

Popular Posts