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. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

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

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

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

              
                <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>


<div id="root">
  </div>


              
            
!

CSS

              
                
              
            
!

JS

              
                
const markDown = `
### Headers

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

### List
- item 1
- item 2
- item 3

### Links
[question?](https://www.google.com)

[sports](https://www.espn.com "world wide sports leader")

### Text decorations

*italic*

**bold**

***bold and italic***

### Images

![grumpy cat](data:image/jpeg;base64,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 "grumpy cat")

### Block Quote
> Yo!

### Code

\`<h1>Hey!<h1>\`

### Code Blocks
\`\`\`
function log(x){
  console.log(x);
  };
log("hi");
\`\`\`
`;

marked.setOptions({
  breaks: true
});

class App extends React.Component {
  constructor(props){
    super(props);
    this.state={
      input: markDown,
    }
  }
  handleChange = event =>
     this.setState({
       input: event.target.value
     })
  render(){
    return (
  <div>    
  <h1>Markdown Previewer</h1>
        <div className="container">
          <div className= 'left'>
            <textarea id='editor' value= {this.state.input} onChange={this.handleChange}></textarea>
        </div>
          <div className= "right">
            <div id='preview' dangerouslySetInnerHTML= {{__html: marked(this.state.input)}}></div>
            </div>
        </div>
    </div>      
    )
}
};

ReactDOM.render(<App/>, document.getElementById("root"))
              
            
!
999px

Console