theluyuan/RWKV-Runner
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

improve markdown rendering

Browse Source
This commit is contained in:
josc146 2024-03-13 15:36:02 +08:00
parent 7fbcb5e810
commit 3a637a973c
5 changed files with 166 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
frontend/package-lock.json generated
View File

@ -41,6 +41,7 @@
"uuid": "^9.0.0"
},
"devDependencies": {
"@tailwindcss/typography": "^0.5.10",
"@types/file-saver": "^2.0.7",
"@types/lodash-es": "^4.17.12",
"@types/react": "^18.2.6",
@ -2283,6 +2284,34 @@
"integrity": "sha512-myfUej5naTBWnqOCc/MdVOLVjXUXtIA+NpDrDBKJtLLg2shUjBu3cZmB/85RyitKc55+lUUyl7oRfLOvkr2hsw==",
"dev": true
},
"node_modules/@tailwindcss/typography": {
"version": "0.5.10",
"resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.10.tgz",
"integrity": "sha512-Pe8BuPJQJd3FfRnm6H0ulKIGoMEQS+Vq01R6M5aCrFB/ccR/shT+0kXLjouGC1gFLm9hopTFN+DMP0pfwRWzPw==",
"dev": true,
"dependencies": {
"lodash.castarray": "^4.4.0",
"lodash.isplainobject": "^4.0.6",
"lodash.merge": "^4.6.2",
"postcss-selector-parser": "6.0.10"
},
"peerDependencies": {
"tailwindcss": ">=3.0.0 || insiders"
}
},
"node_modules/@tailwindcss/typography/node_modules/postcss-selector-parser": {
"version": "6.0.10",
"resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz",
"integrity": "sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==",
"dev": true,
"dependencies": {
"cssesc": "^3.0.0",
"util-deprecate": "^1.0.2"
},
"engines": {
"node": ">=4"
}
},
"node_modules/@tensorflow/tfjs": {
"version": "2.8.6",
"resolved": "https://registry.npmjs.org/@tensorflow/tfjs/-/tfjs-2.8.6.tgz",
@ -4242,6 +4271,24 @@
"resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
"integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
},
"node_modules/lodash.castarray": {
"version": "4.4.0",
"resolved": "https://registry.npmjs.org/lodash.castarray/-/lodash.castarray-4.4.0.tgz",
"integrity": "sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q==",
"dev": true
},
"node_modules/lodash.isplainobject": {
"version": "4.0.6",
"resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
"integrity": "sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==",
"dev": true
},
"node_modules/lodash.merge": {
"version": "4.6.2",
"resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
"integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
"dev": true
},
"node_modules/long": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/long/-/long-4.0.0.tgz",

1
frontend/package.json
View File

@ -42,6 +42,7 @@
"uuid": "^9.0.0"
},
"devDependencies": {
"@tailwindcss/typography": "^0.5.10",
"@types/file-saver": "^2.0.7",
"@types/lodash-es": "^4.17.12",
"@types/react": "^18.2.6",

2
frontend/src/components/MarkdownRender.tsx
View File

@ -23,7 +23,7 @@ const Hyperlink: FC<any> = ({ href, children }) => {
const MarkdownRender: FC<ReactMarkdownOptions & { disabled?: boolean }> = (props) => {
return (
<div dir="auto" className="markdown-body">
<div dir="auto" className="prose markdown-body" style={{ maxWidth: '100%' }}>
{props.disabled ?
<div style={{ whiteSpace: 'pre-wrap' }}>
{props.children}

32
frontend/src/style.scss
View File

@ -46,48 +46,24 @@ body {
overflow-y: auto;
overflow-x: hidden;
ul,
ol {
padding-left: 1.5em;
}
ol {
list-style: none;
counter-reset: item;
li {
counter-increment: item;
&::marker {
content: counter(item) '. ';
}
}
}
pre {
padding: 0;
background: transparent;
code {
font-size: 14px;
}
}
p {
margin: 0 0 10px;
}
code {
padding: 0 0.4em;
margin: 0;
white-space: pre-wrap;
word-break: break-word;
border-radius: 8px;
background-color: var(--color-neutral-muted);
font-size: 11px;
.hljs {
padding: 0;
}
details summary {
cursor: pointer;
}
}

117
frontend/tailwind.config.js
View File

@ -1,12 +1,121 @@
const markdownElements = [
'div',
'p',
'span',
'video',
'img',
'abbr',
'acronym',
'b',
'blockquote',
'code',
'em',
'i',
'li',
'ol',
'ul',
'strong',
'table',
'tr',
'td',
'th',
'details',
'summary',
'kbd',
'samp',
'sub',
'sup',
'ins',
'del',
'var',
'q',
'dl',
'dt',
'dd',
'ruby',
'rt',
'rp',
'br',
'hr',
'h1',
'h2',
'h3',
'h4',
'h5',
'h6',
'thead',
'tbody',
'tfoot',
'u',
's',
'a',
'pre',
'cite'
]
const markdownPseudoElements = [
'::marker',
'::before',
'::after'
]
const tableElements = [
'table',
'tr',
'td',
'th',
'thead',
'tbody',
'tfoot'
]
const proseStyles = {
color: 'inherit'
}
const tableProseStyles = {
...proseStyles,
borderWidth: 'thin',
borderColor: '#d2d2d5'
}
const elementsStyles = markdownElements.reduce((acc, element) => {
let styles = proseStyles
if (tableElements.includes(element))
styles = tableProseStyles
acc[element] = styles
markdownPseudoElements.forEach(pseudo => {
acc[element + pseudo] = styles
})
return acc
}, {})
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
'./index.html',
'./src/**/*.{js,ts,jsx,tsx}'
],
theme: {
extend: {},
extend: {
typography: {
DEFAULT: {
css: {
color: 'inherit',
fontSize: 'inherit',
...elementsStyles
}
}
}
}
},
plugins: [],
plugins: [require('@tailwindcss/typography')]
}