- React component preview markdown text in web browser. The minimal amount of CSS to replicate the GitHub - Markdown style. -
-
-
-
-
```jsx {1,4-5}
-```jsx mdx:preview?background=#fff
+```jsx mdx:preview
import React from 'react';
import MarkdownPreview from '@uiw/react-markdown-preview';
@@ -280,6 +280,24 @@ Here is a simple footnote[^1]. With some additional text after it.
[^1]: My reference.
```
+### Ignore content display
+
+```markdown
+# Hello World
+
+Hello World
+
+Good!
+```
+
+Output:
+
+```html
+Good!
+``` + ## Support dark-mode/night-mode By default, the [`dark-mode`](https://github.com/jaywcjlove/dark-mode/) is automatically switched according to the system. If you need to switch manually, just set the `data-color-mode="dark"` parameter for body. diff --git a/core/package.json b/core/package.json index b6282ffd..11fa60e2 100644 --- a/core/package.json +++ b/core/package.json @@ -1,6 +1,6 @@ { "name": "@uiw/react-markdown-preview", - "version": "4.1.13", + "version": "4.1.14", "description": "React component preview markdown text in web browser. The minimal amount of CSS to replicate the GitHub Markdown style.", "homepage": "https://uiwjs.github.io/react-markdown-preview", "main": "lib/index.js", @@ -44,7 +44,7 @@ "rehype-attr": "~2.1.0", "rehype-autolink-headings": "~6.1.1", "rehype-ignore": "^1.0.1", - "rehype-prism-plus": "~1.5.0", + "rehype-prism-plus": "~1.6.1", "rehype-raw": "^6.1.1", "rehype-rewrite": "~3.0.6", "rehype-slug": "~5.1.0", diff --git a/lerna.json b/lerna.json index 05267e29..c25a485e 100644 --- a/lerna.json +++ b/lerna.json @@ -1,5 +1,4 @@ { - "version": "4.1.13", - "packages": ["core", "website"], - "useWorkspaces": true + "version": "4.1.14", + "packages": ["core", "website"] } diff --git a/package.json b/package.json index 7d9867bd..2dd0e751 100644 --- a/package.json +++ b/package.json @@ -36,7 +36,7 @@ "husky": "~8.0.0", "prettier": "^2.7.1", "pretty-quick": "~3.1.3", - "lerna": "^6.1.0", + "lerna": "^7.1.4", "tsbb": "^4.1.5", "jest": "^29.5.0", "jest-watch-typeahead": "^2.2.2", diff --git a/website/package.json b/website/package.json index 49aa3115..268ee5a2 100644 --- a/website/package.json +++ b/website/package.json @@ -1,21 +1,15 @@ { "name": "website", - "version": "4.1.13", + "version": "4.1.14", "private": true, "scripts": { "build": "kkt build", "start": "kkt start" }, "dependencies": { - "@uiw/react-back-to-top": "^1.2.0", - "@uiw/react-codesandbox": "~1.1.4", - "@uiw/react-github-corners": "~1.5.3", - "@uiw/react-markdown-preview": "^4.1.13", - "@uiw/react-shields": "~1.1.2", - "@uiw/reset.css": "~1.0.5", - "@wcj/dark-mode": "~1.0.9", + "@uiw/react-markdown-preview-example": "^1.5.5", + "@uiw/react-shields": "^1.1.3", "react": "~18.2.0", - "react-code-preview-layout": "~2.1.0", "react-dom": "~18.2.0", "react-router-dom": "^6.8.1" }, diff --git a/website/src/App.css b/website/src/App.css deleted file mode 100644 index ea18f2f6..00000000 --- a/website/src/App.css +++ /dev/null @@ -1,95 +0,0 @@ -body { - margin: 0; - padding: 0; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', - 'Droid Sans', 'Helvetica Neue', sans-serif; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - transition: all 0.3s; -} - -.wmde-markdown { - background-color: transparent !important; -} - -.App { - padding-bottom: 68px; - color: var(--color-theme-text); - transition: all 0.3s; -} - -.App-logo { - height: 20vmin; -} - -.App-header { - text-align: center; - min-height: calc(100vh - 130px); - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - font-size: calc(10px + 2vmin); -} - -.App-header p { - margin-bottom: 10px; - padding: 10px 10px 10px 10px; - max-width: 560px; - white-space: pre-wrap; - word-wrap: break-word; -} - -.App-header a { - color: #09d3ac; -} - -dark-mode { - cursor: pointer; - line-height: 21px; - margin-top: 10px; - margin-left: 10px; - display: inline-block; - user-select: none; - position: fixed; - top: 0; - left: 0; -} - -.App-markdown { - text-align: left; - padding: 16px; - border-radius: 5px; -} - -.App-footer { - text-align: center; - padding-top: 30px; -} - -.App-editor, -.App-markdown { - margin: 0 auto; - max-width: 820px; -} - -.App-editor { - padding-bottom: 10px; -} - -.App-editor textarea { - border-radius: 5px; - max-width: 100%; - min-width: 100%; - padding: 5px; - display: block; - min-height: 120px; -} - -.App-editor-preview { - margin-top: 10px; - padding: 16px; - border-radius: 5px; - min-height: 60px; - border: 1px solid var(--color-border-default); -} diff --git a/website/src/App.tsx b/website/src/App.tsx index 443497b4..bdb3155b 100644 --- a/website/src/App.tsx +++ b/website/src/App.tsx @@ -1,59 +1,66 @@ -import { useState } from 'react'; -import GitHubCorners from '@uiw/react-github-corners'; import Github from '@uiw/react-shields/esm/github'; import Npm from '@uiw/react-shields/esm/npm'; -import BackToUp from '@uiw/react-back-to-top'; +import { useState } from 'react'; +import styled from 'styled-components'; import MarkdownPreview from '@uiw/react-markdown-preview'; -import '@wcj/dark-mode'; -import logo from './logo.svg'; -import { Preview } from './preview'; -import './App.css'; + +const EditorWrapper = styled.div` + padding-bottom: 10px; + margin: 0 auto; + width: 100%; + textarea { + width: 100%; + min-height: 120px; + min-width: 100%; + padding: 5px; + margin-top: 10px; + box-sizing: border-box; + } + .editor-preview { + border: 1px solid var(--color-border-default); + border-radius: 5px; + margin-top: 10px; + min-height: 60px; + padding: 16px; + } +`; let val = 1; -const App = () => { +export const Example = () => { const [value, setValue] = useState(''); return ( -- React component preview markdown text in web browser. The minimal amount of CSS to replicate the GitHub - Markdown style. -
-