Hi, here is my project: https://ozanbaskan.github.io/githubmarkdown/
I learned about Github while doing this project and started using Visual Studio Code. I passed every test for the project. But somethings do not seem to run properly with the editor.
And how do I upload the source code in the same repository I uploaded my page to?
I still havent took the step to use VS Code and upload my projects at Github. Still, if you simultaneously upload your projects in Codepen, it would be more convenient for people like me to review your code
It looks good @ozanbaskan though stylewise Iām not a fan of having a horizontal scrollbar in either the editor or the viewer.
Here is my code for the app:
import React from 'react';
import ReactDOM from 'react-dom';
import marked from 'marked';
marked.setOptions({
breaks: true
});
class MarkdownEditor extends React.Component {
constructor(props) {
super(props);
this.state = {
value: placeHolder
};
this.handleChange = this.handleChange.bind(this);
}
handleChange (event) {
this.setState({
value: event.target.value
})
}
render() {
return (
<div className='container h-100 justify-content-center'>
<div className='jumbotron my-auto'>
<h1 className='text-center'>My Markdown Previewer For GitHub</h1>
<div className='headers'>Editor</div>
<textarea className=''
value={this.state.value}
onChange={this.handleChange}
type='text'
id='editor'
></textarea>
<div />
<div className='headers'>Viewer</div>
<div id="preview" dangerouslySetInnerHTML={{ __html: marked(this.state.value) }}/>
</div>
</div>
)
}
}
const placeHolder = `# Here is my react markdown previewer for GitHub markdown syntax!
## This is a heading
### And more:
Here is some code, \`<div></div>\`, between 2 backticks.
\`\`\`
// this is multi-line code:
function anotherExample(firstLine, lastLine) {
if (firstLine == '\`\`\`' && lastLine == '\`\`\`') {
return multiLineCode;
}
}
\`\`\`
You can also make text **bold**!
Or _italic_.
Or... wait for it... **_both!_**
And feel free to ~~cross stuff out~~.
There are also [links](https://www.freecodecamp.com), and
> Block Quotes!
1. And there are numbererd lists too.
1. Use just 1s if you want!
1. And last but not least, let's not forget embedded images:
`;
export default MarkdownEditor;