├── src ├── style.scss ├── index.html ├── style.css └── script.js ├── postcss.config.js ├── package.json └── tailwind.config.js /src/style.scss: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 |
-------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "devDependencies": { 3 | "autoprefixer": "^10.4.14", 4 | "postcss": "^8.4.23", 5 | "tailwindcss": "^3.3.2" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | mode:'jit', 4 | content: [ 5 | "./index.html", 6 | "./src/**/*.{js,ts,jsx,tsx}", 7 | ], 8 | theme: { 9 | extend: {}, 10 | }, 11 | plugins: [], 12 | } 13 | 14 | -------------------------------------------------------------------------------- /src/style.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | html { 5 | font-size: 12px; 6 | } 7 | 8 | body { 9 | box-sizing: border-box; 10 | width: 100vw; 11 | min-height: 100vh; 12 | display: flex; 13 | justify-content: center; 14 | align-items: center; 15 | background-color: #e6e7e8; 16 | } 17 | 18 | *, 19 | *:before, 20 | *:after { 21 | margin: 0; 22 | padding: 0; 23 | box-sizing: inherit; 24 | } 25 | 26 | .App { 27 | display: grid; 28 | grid-template-areas: 29 | 'title title' 30 | 'editor preview'; 31 | place-items: center; 32 | gap: 20px; 33 | padding: 50px 0; 34 | } 35 | 36 | #title { 37 | grid-area: title; 38 | color: #63abf2; 39 | font-family: 'Rubik', sans-serif; 40 | text-align: center; 41 | font-size: 5rem; 42 | text-shadow: 2px 1px #212120; 43 | } 44 | 45 | #editor, 46 | #preview { 47 | width: 500px; 48 | height: 600px; 49 | padding: 24px 14px 14px 14px; 50 | border: none; 51 | border-radius: 3px; 52 | border: 2px solid white; /* Add white border */ 53 | } 54 | 55 | #editor { 56 | grid-area: editor; 57 | background: #7bb2e8; /* Sublime Text editor background color */ 58 | box-shadow: 5px 5px #282923; /* Sublime Text editor box shadow */ 59 | color: #ffffff; /* Sublime Text editor text color */ 60 | } 61 | 62 | #preview { 63 | grid-area: preview; 64 | background: #7bb2e8; /* Sublime Text preview background color */ 65 | color: #ffffff; /* Sublime Text preview text color */ 66 | font-family: 'Molengo', sans-serif; 67 | font-size: 1.2rem; 68 | box-shadow: 5px 5px #282923; /* Sublime Text preview box shadow */ 69 | overflow-y: auto; 70 | } 71 | 72 | a { 73 | color: #66d9ef; /* Sublime Text link color */ 74 | } 75 | 76 | li { 77 | margin-left: 3rem; 78 | } 79 | 80 | blockquote { 81 | margin-left: 2rem; 82 | padding-left: 0.6rem; 83 | border-left: 0.4rem solid #75715e; /* Sublime Text blockquote border color */ 84 | } 85 | 86 | @media only screen and (max-width: 1050px) { 87 | .App { 88 | grid-template-areas: 89 | 'title' 90 | 'editor' 91 | 'preview'; 92 | } 93 | 94 | #editor, 95 | #preview { 96 | width: 150vw; 97 | height: 400px; 98 | } 99 | } 100 | -------------------------------------------------------------------------------- /src/script.js: -------------------------------------------------------------------------------- 1 | //Initialize a markdown string 2 | const initialMarkdown = ` 3 | # heding 1 4 | ## heading 2 5 | ### heading 3 6 | 7 | Heres some code, \`
dasdsad
\`, between 2 backticks. 8 | 9 | \`\`\` 10 | // this is multi-line code: 11 | 12 | function anotherExample(firstLine, lastLine) { 13 | if (firstLine == '\\\`\\\`\\\`' && lastLine == '\\\`\\\`\\\`') { 14 | return multiLineCode; 15 | } 16 | } 17 | \`\`\` 18 | 19 | You can also make text **bold**... whoa! 20 | Or _italic_. 21 | Or... wait for it... **_both!_** 22 | And feel free to go crazy ~~crossing stuff out~~. 23 | 24 | 25 | And if you want to get really crazy, even tables: 26 | 27 | Wild Header | Crazy Header | Another Header? 28 | ------------ | ------------- | ------------- 29 | Your content can | be here, and it | can be here.... 30 | And here. | Okay. | I think we get it. 31 | 32 | - And of course there are lists. 33 | - Some are bulleted. 34 | - With different indentation levels. 35 | - That look like this. 36 | 37 | 38 | 1. And there are numbered lists too. 39 | 1. Use just 1s if you want! 40 | 1. And last but not least, let's not forget embedded images: 41 | 42 | ![freeCodeCamp Logo](https://cdn.freecodecamp.org/testable-projects-fcc/images/fcc_secondary.svg) 43 | `; 44 | 45 | 46 | // Line breaks allowed 47 | marked.setOptions({ 48 | breaks: true, 49 | }); 50 | 51 | // Line breaks allowed 52 | marked.setOptions({ 53 | breaks: true, 54 | }); 55 | 56 | 57 | class App extends React.Component { 58 | // Use the useState hook to create a state variable `markdown` and a setter function `setMarkdown` to update its value. The initial value is set to `initialMarkdown`. 59 | state = { 60 | text: initialMarkdown 61 | }; 62 | 63 | // Define a function `handleInputChange` that updates the `markdown` state with the new value whenever the input changes. The new value is obtained from `event.target.value`. 64 | onChange = e => { 65 | this.setState({ 66 | text: e.target.value 67 | }); 68 | }; 69 | 70 | render() { 71 | return ( 72 |
73 |

Markdown Previewer

74 |