DEV Community

Cover image for Devto formatting variants
Andrey
Andrey

Posted on • Updated on

Devto formatting variants

There is a test. Markdown format is being tested in a special way. In the text, it is impossible to use all the built-in formatting symbols.

Table Of Contents

What is markdown? (heading 1 ("#"))

Markdown is a simple technique for creating plain text documents. It is a substitute for HTML, but a more extensible one, with support for many markup languages, including HTML and XML, as well as for plain text formatting.

If markdown was a movie synopses (heading ("##"))

A young man discovers that his grandmother is a witch. She has a curse on him that he must find a way to break and get rid of it.

H3 (heading ("###"))

Its just a h3

H4 (heading ("####"))

Its just a h4

But seriously, lets arrange our knowledge (quote)

How to use markdown

  1. Read the first sentence of this document. It is very important.
  2. Open this document in a browser.
  3. Look for the first markdown symbol.
  4. Write the symbol down in your note-taking software. 5. Write down the word “markdown”.
  5. Go to step 3 and repeat.
  6. Repeat steps 3 to 6 until you don’t need this document anymore.
  7. Close this document and open the one with markdown symbols.
  8. Print it out.
  9. Take it to an office supply store and ask for red ink to paste on it.
  10. Go home.
  11. Repeat steps 1 to 11 until the markdown text becomes readable.

It's that simple



Components

H1

H2

H3

H4

H5
H6

Random image

Caption for this random image

Hidden note)


Lists

Ordered todo list

  1. Make a to do list
  2. Check off first thing on the "To do" list
  3. Realize you've already accomplished 2 things on the list
  4. Reward yourself with a nap

Ordered list with content

  1. Title of the first thing Random image again Random image
  2. Second thing

Unordered list

  • Task number… One?
  • Two I guess.

Links

I’m an inline-style link

I'm a reference-style link

You can use numbers for reference-style link definitions

Or leave it empty and use the link text itself

URLs and URLs in angle brackets will automatically get turned into links.
http://www.example.com or http://www.example.com and sometimes
example.com (but not on Github, for example).

Some text to show that the reference links can follow later.


Code and Syntax Highlighting

Inline code has back-ticks around it.

Blocks of code are either fenced by lines with three back-ticks

``` and with language, or are indented with four spaces. I recommend only using the fenced code blocks — they’re easier and only they support syntax highlighting.


 javascript
var s = "JavaScript syntax highlighting";
alert(s);


Enter fullscreen mode Exit fullscreen mode

python
s = "Python syntax highlighting"
print s


Enter fullscreen mode Exit fullscreen mode


No language indicated, so no syntax highlighting. 
But let's throw in a <b>tag</b>.


Enter fullscreen mode Exit fullscreen mode


final theme = Theme.of(context);


Enter fullscreen mode Exit fullscreen mode

Tables?

Colons can be used to align columns.

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

The outer pipes (|) are optional, and you don't need to make the raw Markdown line up prettily. You can also use inline Markdown.

Markdown Less Pretty
Still renders nicely
1 2 3

Inline HTML

Definition list
Is something people use sometimes.
Markdown in HTML
Does *not* work **very** well. Use HTML tags.
Horizontal lines

Three or more...


Hyphens


Asterisks



Special thanks

P.S. That’s for devto mobile app

Top comments (0)