{"componentChunkName":"component---src-templates-post-js","path":"/pensieve/markdown-playground","result":{"data":{"markdownRemark":{"html":"

\n \n \n \n \n

\n
class FlavorForm extends React.Component {  constructor(props) {\n    super(props);\n    this.state = {value: 'coconut'};\n\n    this.handleChange = this.handleChange.bind(this);\n    this.handleSubmit = this.handleSubmit.bind(this);\n  }\n\n  handleChange(event) {\n    this.setState({value: event.target.value});  }\n\n  handleSubmit(event) {    alert('Your favorite flavor is: ' + this.state.value);    event.preventDefault();  }\n  render() {\n    return (\n      <form onSubmit={this.handleSubmit}>        <label>\n          Pick your favorite flavor:\n          <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>\n        <input type=\"submit\" value=\"Submit\" />\n      </form>    );\n  }\n}
\n
highlight.js
\n
// Here is a comment\nfunction $initHighlight(block, cls) {\n  try {\n    if (cls.search(/\\bno\\-highlight\\b/) != -1)\n      return process(block, true, 0x0F) +\n             ` class=\"${cls}\"`;\n  } catch (e) {\n    /* handle exception */\n  }\n  for (var i = 0 / 2; i < classes.length; i++) {\n    if (checkCondition(classes[i]) === undefined) {\n      console.log('undefined');\n    }\n  }\n\n  return (\n    <div>\n      <web-component>{block}</web-component>\n    </div>\n  )\n}\n\nexport $initHighlight;
\n

This is a paragraph.

\n
This is a paragraph.
\n

Header 1

\n

Header 2

\n
Header 1\n========\n\nHeader 2\n--------
\n
@import 'compass/reset';\n\n// variables\n$colorGreen: #008000;\n$colorGreenDark: darken($colorGreen, 10);\n\n@mixin container {\n  max-width: 980px;\n}\n\n// mixins with parameters\n@mixin button($color: green) {\n  @if ($color == green) {\n    background-color: #008000;\n  } @else if ($color == red) {\n    background-color: #b22222;\n  }\n}\n\nbutton {\n  @include button(red);\n}\n\ndiv,\n.navbar,\n#header,\ninput[type='input'] {\n  font-family: 'Helvetica Neue', Arial, sans-serif;\n  width: auto;\n  margin: 0 auto;\n  display: block;\n}\n\n.row-12 > [class*='spans'] {\n  border-left: 1px solid #b5c583;\n}\n\n// nested definitions\nul {\n  width: 100%;\n  padding: {\n    left: 5px;\n    right: 5px;\n  }\n  li {\n    float: left;\n    margin-right: 10px;\n    .home {\n      background: url('http://placehold.it/20') scroll no-repeat 0 0;\n    }\n  }\n}\n\n.banner {\n  @extend .container;\n}\n\na {\n  color: $colorGreen;\n  &:hover {\n    color: $colorGreenDark;\n  }\n  &:visited {\n    color: #c458cb;\n  }\n}\n\n@for $i from 1 through 5 {\n  .span#{$i} {\n    width: 20px * $i;\n  }\n}\n\n@mixin mobile {\n  @media screen and (max-width: 600px) {\n    @content;\n  }\n}
\n
# hello world\n\nyou can write text [with links](http://example.com) inline or [link references][1].\n\n- one _thing_ has *em*phasis\n- two **things** are **bold**\n\n[1]: http://example.com\n\n---\n\n# hello world\n\n<this_is inline=\"xml\"></this_is>\n\n> markdown is so cool\n\n    so are code segments\n\n1. one thing (yeah!)\n2. two thing `i can write code`, and `more` wipee!
\n

Header 1

\n

Header 2

\n

Header 3

\n

Header 4

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

Header 1

\n

Header 2

\n

Header 3

\n

Header 4

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

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

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

This is a header

\n
    \n
  1. This is the first list item.
    2. \n
  2. This is the second list item.
    3. \n
\n

Here's some example code:

\n
Markdown.generate();
\n
\n
> ## This is a header.\n> 1. This is the first list item.\n> 2. This is the second list item.\n>\n> Here's some example code:\n>\n>     Markdown.generate();
\n\n
- Red\n- Green\n- Blue\n\n* Red\n* Green\n* Blue\n\n- Red\n- Green\n- Blue
\n
    \n
  1. Buy flour and salt
    2. \n
  2. Mix together with water
    3. \n
  3. Bake
    4. \n
\n
1. Buy flour and salt\n1. Mix together with water\n1. Bake
\n

Paragraph:

\n
Code
\n\n
Paragraph:\n\n    Code
\n
\n
\n
\n
\n
\n
* * *\n\n***\n\n*****\n\n- - -\n\n---------------------------------------
\n

This is an example link.

\n

This link has no title attr.

\n

This is an example reference-style link.

\n
This is [an example](http://example.com "Example") link.\n\n[This link](http://example.com) has no title attr.\n\nThis is [an example] [id] reference-style link.\n\n[id]: http://example.com "Optional Title"
\n

single asterisks

\n

single underscores

\n

double asterisks

\n

double underscores

\n
*single asterisks*\n\n_single underscores_\n\n**double asterisks**\n\n__double underscores__
\n

This paragraph has some code in it.

\n
This paragraph has some `code` in it.
","frontmatter":{"title":"Markdown Test File","description":"abc234","date":"2019-12-07","slug":"/pensieve/markdown-playground","tags":["Testing"]}}},"pageContext":{}}}