├── src
├── index.css
├── main.jsx
├── App.css
├── App.jsx
└── assets
│ └── react.svg
├── vite.config.js
├── .gitignore
├── index.html
├── README.md
├── .eslintrc.cjs
├── package.json
└── public
└── vite.svg
/src/index.css:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/vite.config.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite'
2 | import react from '@vitejs/plugin-react'
3 |
4 | // https://vitejs.dev/config/
5 | export default defineConfig({
6 | plugins: [react()],
7 | })
8 |
--------------------------------------------------------------------------------
/src/main.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ReactDOM from 'react-dom/client'
3 | import App from './App.jsx'
4 | import './index.css'
5 |
6 | ReactDOM.createRoot(document.getElementById('root')).render(
7 |
8 |
9 | ,
10 | )
11 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 | pnpm-debug.log*
8 | lerna-debug.log*
9 |
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 |
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | React MarkDown
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # React + Vite
2 |
3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
4 |
5 | Currently, two official plugins are available:
6 |
7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
9 |
--------------------------------------------------------------------------------
/.eslintrc.cjs:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | root: true,
3 | env: { browser: true, es2020: true },
4 | extends: [
5 | 'eslint:recommended',
6 | 'plugin:react/recommended',
7 | 'plugin:react/jsx-runtime',
8 | 'plugin:react-hooks/recommended',
9 | ],
10 | ignorePatterns: ['dist', '.eslintrc.cjs'],
11 | parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
12 | settings: { react: { version: '18.2' } },
13 | plugins: ['react-refresh'],
14 | rules: {
15 | 'react/jsx-no-target-blank': 'off',
16 | 'react-refresh/only-export-components': [
17 | 'warn',
18 | { allowConstantExport: true },
19 | ],
20 | },
21 | }
22 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-markdown-previewer",
3 | "private": true,
4 | "version": "0.0.0",
5 | "type": "module",
6 | "scripts": {
7 | "dev": "vite",
8 | "build": "vite build",
9 | "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
10 | "preview": "vite preview"
11 | },
12 | "dependencies": {
13 | "react": "^18.3.1",
14 | "react-dom": "^18.3.1",
15 | "react-markdown": "^9.0.1"
16 | },
17 | "devDependencies": {
18 | "@types/react": "^18.3.3",
19 | "@types/react-dom": "^18.3.0",
20 | "@vitejs/plugin-react": "^4.3.1",
21 | "eslint": "^8.57.0",
22 | "eslint-plugin-react": "^7.34.2",
23 | "eslint-plugin-react-hooks": "^4.6.2",
24 | "eslint-plugin-react-refresh": "^0.4.7",
25 | "vite": "^5.3.1"
26 | }
27 | }
28 |
--------------------------------------------------------------------------------
/src/App.css:
--------------------------------------------------------------------------------
1 | .boxes-container {
2 | display: flex;
3 | flex-direction: column;
4 | margin: auto;
5 | margin-top: 40px;
6 | width: 90%;
7 | }
8 |
9 | #editor {
10 | width: 100%;
11 | height: 80vh;
12 | font-size: 18px;
13 | background-color: #2f2f2f;
14 | resize: none;
15 | color: white;
16 | padding: 10px;
17 | overflow: auto;
18 | border-radius: 20px;
19 | }
20 |
21 | #preview {
22 | width: 100%;
23 | height: 80vh;
24 | margin-top: 10px;
25 | font-size: 18px;
26 | background-color: #2f2f2f;
27 | color: white;
28 | padding: 10px;
29 | overflow: auto;
30 | border-radius: 20px;
31 | }
32 |
33 | img {
34 | max-width: 100%;
35 | }
36 |
37 | @media screen and (min-width: 768px) {
38 | .boxes-container {
39 | flex-direction: row;
40 | width: 80%;
41 | }
42 |
43 | #editor {
44 | width: 50%;
45 | height: 80vh;
46 | margin-right: 10px;
47 | }
48 |
49 | #preview {
50 | width: 50%;
51 | height: 80vh;
52 | margin-left: 10px;
53 | margin-top: 0;
54 | }
55 | }
--------------------------------------------------------------------------------
/public/vite.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/App.jsx:
--------------------------------------------------------------------------------
1 | import { useState } from "react";
2 | import "./App.css"
3 | import ReactMarkDown from "react-markdown"
4 | export default function App() {
5 | const defaultMarkdown = `
6 | # Welcome to my React Markdown Previewer!
7 |
8 | ## This is a sub-heading...
9 | ### And here's some other cool stuff:
10 |
11 | Heres some code, \`\`, between 2 backticks.
12 |
13 | \`\`\`
14 | // this is multi-line code:
15 |
16 | function anotherExample(firstLine, lastLine) {
17 | if (firstLine == '\`\`\`' && lastLine == '\`\`\`') {
18 | return multiLineCode;
19 | }
20 | }
21 | \`\`\`
22 |
23 | You can also make text **bold**... whoa!
24 | Or _italic_.
25 | Or... **_both!_**
26 |
27 | There's also [links](https://www.freecodecamp.com), and
28 | > Block Quotes!
29 |
30 | 
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 | const [markDownText, setMarkDownText] = useState(defaultMarkdown)
39 | return
40 |
41 |
46 |
47 | {markDownText}
48 |
49 |
50 |