Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

HTML

              
                <div id="title">
  <h1>Markdown Previewer v0.01</h1>
<label class="switch-light switch-candy-blue" onclick="">
  <input type="checkbox" id="view">

 <span>
    <span>Edit Markdown</span>
    <span>View Markdown</span>
    <a></a>
  </span>
</label>
</div>
<div id="previewer">
 
</div>

              
            
!

CSS

              
                @import "https://fonts.googleapis.com/css?family=Raleway|Roboto:100"

$primary-color: #546e7a
$markdown-lines: #ff3d00
html *
  margin: 0
  padding: 0
  box-sizing: border-box

body
  background: #CCCCCC
  font-family: 'Raleway', sans-serif

h1, h2, h3
  font-family: 'Roboto', sans-serif

#container
  display: flex
  max-width: 100%

@media (max-width: 800px)
  #container
    flex-direction: column
 

@media (min-width: 800px)
  #container
    flex-direction: row

#left, #right, #input
  flex: 1
  min-height: 100px
  box-shadow-bottom: 1px 3px 15px #2b8836
  background: $primary-color

#left h2.titles, #right h2.titles, #input h2.titles
  text-align: center
  font-size: 1rem
  padding: 1rem
  display: block
  color: #FFF
  font-weight: bold
  background: $primary-color

#left textarea, #right textarea, #input textarea
  line-height: 1.5
  font-size: 16px
  margin: 0
  width: 100%
  padding: 10px
  border: none
  box-sizing: border-box
  -moz-box-sizing: border-box
  -webkit-box-sizing: border-box
  resize: vertical

#left textarea:focus, #right textarea:focus, #input textarea:focus
  border: none
  outline: none
  -webkit-box-shadow: none
  -moz-box-shadow: none
  box-shadow: none

#left
  background: #FFF
  text-align: center
  order: 1
  padding: 0
  margin-right: 0.5rem

#right
  background: #FFF
  order: 2
  padding: 0

  
@media (max-width: 800px)
  #left
    margin: 0
  #right
    display: none
    
#preview
  background: #FFF
  
#title label
  display: none
  margin-bottom: 0.5rem
  background-color: $primary-color
  color: #FFF
  font-weight: 500
  
@media (max-width: 800px)
  #title label
    display: block
  #left h2.titles, #right h2.titles
    display: none
  
#title h1
  display: block
  font-size: 3em
  font-size: 1.25rem
  padding: 0.5em
  text-align: center
  background: $primary-color
  color: #FFF
  margin-bottom: 0.5rem

#preview
  padding: 1em

.markdown-body
  margin: 0 auto
  padding: 45px
  font-family: 'Raleway'

  hr
    background-color: $markdown-lines

  h1, h2
    border-color: $markdown-lines

  pre code
    white-space: pre-wrap
    word-wrap: break-word
              
            
!

JS

              
                var sampleText = "# An exhibit of Markdown\r\rThis note demonstrates some of what [Markdown][1] is capable of doing.\r\r## Basic formatting\r\rParagraphs can be written like so. A paragraph is the basic block of Markdown. A paragraph is what text will turn into when there is no reason it should become anything else.\r\rParagraphs must be separated by a blank line. Basic formatting of *italics* and **bold** is supported. This *can be **nested** like* so.\r\r## Lists\r\r### Ordered list\r\r1. Item 1\r2. A second item\r3. Number 3\r4. Ⅳ\r\r*Note: the fourth item uses the Unicode character for [Roman numeral four][2].*\r\r### Unordered list\r\r* An item\r* Another item\r* Yet another item\r* And there's more...\r\r## Paragraph modifiers\r\r### Code block\r\r```\rCode blocks are very useful for developers and other people who look at code or other things that are written in plain text. As you can see, it uses a fixed-width font.\r```\r\rYou can also make `inline code` to add code into other things.\r\r### Quote\r\r> Here is a quote. What this is should be self explanatory. Quotes are automatically indented when they are used.\r\r## Headings\r\rThere are six levels of headings. They correspond with the six levels of HTML headings. You've probably noticed them already in the page. Each level down uses one more hash character.\r\r### Headings *can* also contain **formatting**\r\r### They can even contain `inline code`\r\rOf course, demonstrating what headings look like messes up the structure of the page.\r\rI don't recommend using more than three or four levels of headings here, because, when you're smallest heading isn't too small, and you're largest heading isn't too big, and you want each size up to look noticeably larger and more important, there there are only so many sizes that you can use.\r\r## URLs\r\rURLs can be made in a handful of ways:\r\r* A named link to [MarkItDown][3]. The easiest way to do these is to select what you want to make a link and hit `Ctrl+L`.\r* Another named link to [MarkItDown](http://www.markitdown.net/)\r* Sometimes you just want a URL like <http://www.markitdown.net/>.\r\r## Horizontal rule\r\rA horizontal rule is a line that goes across the middle of the page.\r\r---\r\rIt's sometimes handy for breaking things up.\r\r## Images\r\rMarkdown can also contain images. I'll need to add something here sometime.\r\r## Finally\r\rThere's actually a lot more to Markdown than this. See the official [introduction][4] and [syntax][5] for more information. However, be aware that this is not using the official implementation, and this might work subtly differently in some of the little things.\r\r  [1]: http://daringfireball.net/projects/markdown/\r  [2]: http://www.fileformat.info/info/unicode/char/2163/index.htm\r  [3]: http://www.markitdown.net/\r  [4]: http://daringfireball.net/projects/markdown/basics\r  [5]: http://daringfireball.net/projects/markdown/syntax";



marked.setOptions({
  renderer: new marked.Renderer(),
  gfm: true,
  tables: true,
  breaks: true,
  pedantic: true,
  sanitize: true,
  smartLists: true,
  smartypants: true
});

// Define components
var EditorContainer = React.createClass({
  getInitialState: function() {
    return {markdown: sampleText,
           parsed: marked(sampleText.toString())};
  },
  parseMarkdown: function( newMarkdown ) {
    console.log(newMarkdown.toString());
    this.setState({
      markdown: newMarkdown,
      parsed: marked(newMarkdown.toString())
                  });
  },
  render: function (){
    return (<div id='container'>
        <div id="left">
         <ComponentTitle text="Markdown Source" /> 
          <Editor text={this.state.markdown} onChange={this.parseMarkdown} />
        </div>
        <div id="right">
          <ComponentTitle text="Compiled Markdown" />
          <Preview parsed={this.state.parsed} />
        </div>
      </div>);
  }
});

// Subtitles
var ComponentTitle = React.createClass({
          render: function (){
            return <h2 className="titles">{this.props.text}</h2>;
          }
});

// Textarea and change handler
var Editor = React.createClass({
  handleChange: function (event){
    this.props.onChange(event.target.value);
  },
  render: function(){
    return <textarea id="inputArea" onChange={this.handleChange}>{this.props.text}</textarea>;
  }
});

// Auto-update
var Preview = React.createClass({
  render: function(){
    return <div id="preview" className="markdown-body" dangerouslySetInnerHTML={{__html: this.props.parsed}}></div>;
  }
});

ReactDOM.render(
  <EditorContainer />,
document.getElementById('previewer')
);

// Auto resize textarea to fit content
autosize(document.getElementById("inputArea"));

$("#view").change( function(){
  if( $(this).is(":checked") ){
    $("#left").css( "display", "none" );
    $("#right").css( "display", "block" );
  }else{
    $("#right").css( "display", "none" );
    $("#left").css( "display", "block" );
  }
});
              
            
!
999px

Console