Markdown Test File

A test file containing different markdown elements

December 7, 2019・5 min read

Image Alt

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
class FlavorForm extends React.Component { // highlight-line
  constructor(props) {
    super(props);
    this.state = {value: 'coconut'};

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    // highlight-next-line
    this.setState({value: event.target.value});
  }

  // highlight-start
  handleSubmit(event) {
    alert('Your favorite flavor is: ' + this.state.value);
    event.preventDefault();
  }
  // highlight-end

  render() {
    return (
      { /* highlight-range{1,4-9,12} */ }
      <form onSubmit={this.handleSubmit}>
        <label>
          Pick your favorite flavor:
          <select value={this.state.value} onChange={this.handleChange}>
            <option value="grapefruit">Grapefruit</option>
            <option value="lime">Lime</option>
            <option value="coconut">Coconut</option>
            <option value="mango">Mango</option>
          </select>
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// Here is a comment
function $initHighlight(block, cls) {
  try {
    if (cls.search(/\bno\-highlight\b/) != -1)
      return process(block, true, 0x0F) +
             ` class="${cls}"`;
  } catch (e) {
    /* handle exception */
  }
  for (var i = 0 / 2; i < classes.length; i++) {
    if (checkCondition(classes[i]) === undefined) {
      console.log('undefined');
    }
  }

  return (
    <div>
      <web-component>{block}</web-component>
    </div>
  )
}

export $initHighlight;

This is a paragraph.

This is a paragraph.

Header 1

Header 2

Header 1
========

Header 2
--------
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
@import 'compass/reset';

// variables
$colorGreen: #008000;
$colorGreenDark: darken($colorGreen, 10);

@mixin container {
  max-width: 980px;
}

// mixins with parameters
@mixin button($color: green) {
  @if ($color == green) {
    background-color: #008000;
  } @else if ($color == red) {
    background-color: #b22222;
  }
}

button {
  @include button(red);
}

div,
.navbar,
#header,
input[type='input'] {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  width: auto;
  margin: 0 auto;
  display: block;
}

.row-12 > [class*='spans'] {
  border-left: 1px solid #b5c583;
}

// nested definitions
ul {
  width: 100%;
  padding: {
    left: 5px;
    right: 5px;
  }
  li {
    float: left;
    margin-right: 10px;
    .home {
      background: url('http://placehold.it/20') scroll no-repeat 0 0;
    }
  }
}

.banner {
  @extend .container;
}

a {
  color: $colorGreen;
  &:hover {
    color: $colorGreenDark;
  }
  &:visited {
    color: #c458cb;
  }
}

@for $i from 1 through 5 {
  .span#{$i} {
    width: 20px * $i;
  }
}

@mixin mobile {
  @media screen and (max-width: 600px) {
    @content;
  }
}
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
# hello world

you can write text [with links](http://example.com) inline or [link references][1].

- one _thing_ has *em*phasis
- two **things** are **bold**

[1]: http://example.com

---

# hello world

<this_is inline="xml"></this_is>

> markdown is so cool

    so are code segments

1. one thing (yeah!)
2. two thing `i can write code`, and `more` wipee!

Header 1

Header 2

Header 3

Header 4

Header 5
Header 6
# Header 1
## Header 2
### Header 3
#### Header 4
##### Header 5
###### Header 6

Header 1

Header 2

Header 3

Header 4

Header 5
Header 6
# Header 1 #
## Header 2 ##
### Header 3 ###
#### Header 4 ####
##### Header 5 #####
###### Header 6 ######

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus. Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.

> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus. Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.

This is a header

  1. This is the first list item.
  2. This is the second list item.

Here’s some example code:

Markdown.generate();
> ## This is a header.
> 1. This is the first list item.
> 2. This is the second list item.
>
> Here's some example code:
>
>     Markdown.generate();
  • Red

  • Green

  • Blue

  • Red

  • Green

  • Blue

  • Red

  • Green

  • Blue

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
- Red
- Green
- Blue

* Red
* Green
* Blue

- Red
- Green
- Blue
  1. Buy flour and salt
  2. Mix together with water
  3. Bake
1
2
3
1. Buy flour and salt
1. Mix together with water
1. Bake

Paragraph:

Code
Paragraph:

    Code





* * *

***

*****

- - -

---------------------------------------

This is an example link.

This link has no title attr.

This is an example reference-style link.

This is [an example](http://example.com "Example") link.

[This link](http://example.com) has no title attr.

This is [an example] [id] reference-style link.

[id]: http://example.com "Optional Title"

single asterisks

single underscores

double asterisks

double underscores

*single asterisks*

_single underscores_

**double asterisks**

__double underscores__

This paragraph has some code in it.

This paragraph has some `code` in it.

This is some inline $math$ and some blocks:

$$ E = mc^2 $$

This is some inline $math$ and some blocks:

$$ E = mc^2 $$
Posted on:
December 7, 2019
Length:
5 minute read, 860 words
Categories:
markdown
Series:
Getting Started
Tags:
test
See Also: