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="app"></div>
              
            
!

CSS

              
                //#4ABDAC
//#ff9e84
body
  display: flex
  justify-content: center
  font-family: heveltica
  background-color: #4ABDAC
  color: black
#APP
  width: 94vw
  justify-self: center
  display: flex
  justify-content: space-between
  flex-direction: column
  padding: 20px
  align-items: stretch
  max-height: 500vh
.input
  border: 1px solid white
  width: 95%
  padding: 8px
  background-color: #ff9e84
  font-size: 20px
  align-self: center
.preview
  border: 1px solid white
  width: 95%
  padding: 16px
  background-color: #ff9e84
  font-size: 20px  
  margin-top: 30px
  align-self: center
textarea
  max-width: 100%
  max-height: 125vh
  min-width: 50%
code
  background-color: white
  color: #3d2d29
              
            
!

JS

              
                //const marked = require("marked");
marked.setOptions({breaks: true,});
const Child = (props) => {
  return (
    <div>
      {props.children}
    </div>  
  )  
  
}
const Child2 = (props) => {
  return (
    <div>
      {props.children}
    </div>  
  )  
  
}

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      markdown:placeholder,
      rawDisplay: false,
      markedDisplay: true
    }
    this.updateMarkDown = this.updateMarkDown.bind(this);
    
  }
  updateMarkDown(event) {
   this.setState({markdown:event.target.value});
  updateDisplay=() => {
    this.setState({
      rawDisplay: !this.state.rawDisplay
    })
  }  
}
  render() {
    
    return (
      <div id='APP'>
        <div className='input'>
          <Child>
            <h1>This is a Markdown Previewer</h1>
            <p>Enter text in the text editor below this paragraph, and it will render as HTML in the lower box. This is called Markdown.
            </p><p>Take a gander at what's been written in the text editor so far to learn the syntax.You can learn more about how to use the editor with <a target='_blank' href='https://guides.github.com/pdfs/markdown-cheatsheet-online.pdf'>this guide.</a></p>
            <textarea id='editor'
              value={this.state.markdown}
              onChange={this.updateMarkDown}/>
          </Child>
          
        </div> 
        <div className='preview'>
          <Child2>
          {/*} {marked(this.state.markdown)}  this display the raw HTML, saving for a later project*/}
            <div id='preview'
              dangerouslySetInnerHTML={{__html: marked(this.state.markdown)}}></div>
          </Child2>  
        </div> 
      </div>);
  }
}
const placeholder = 
`
# This is how you make an H1
## Here's an H2
#Here's a failed H1 with improper syntax. That might seem weird, but this one passes Free Code Camp's tests while the H1 that actually works fails. FCC's tests aren't perfect. Ignore this line, it doesn't exist.

Anyway:

For inline code, use 2 backticks: \`<div></div>\`. Amazing!

\`\`\`
function rot13(str) { // LBH QVQ VG!
  return str.split('').map(x=>/[A-Z]/.test(x)?x=x.charCodeAt(0):x=x)
.map(x=>typeof x!=="number"?x=x:x>77?x=String.fromCharCode(x-13):String.fromCharCode(x+13)).join('');}
// Change the inputs below to test
rot13("SERR PBQR PNZC");
\`\`\`
  
-Two asterisks for **bold**
-Underlines for _italics_
-Underlines inside of two asterisks for **_bold italics!_**
-Use 2 ~'s on each side to make a ~~kebab~~

-As usual, use a ">" when quoting someone.
> When you do that, the quote looks like this


-Use a '-' to make an unordered list. 
  -just indent your '-' to indent the bullet points
    -see?


-Use a number followed by a period to make an ordered list.
  1. Item 1
  2. Item 2
  3. and so on and so on

Here's how you make a link: [GitHub](http://github.com)

And finally, here's you would embed an image... if you're into that sort of thing:

![squiggly line](https://cloud.githubusercontent.com/assets/711743/25648417/57cd2c0c-2fe9-11e7-8753-b60ea2656faf.png)
`


ReactDOM.render(<App />, document.getElementById('app'));

              
            
!
999px

Console