diff --git a/src/assets/style/variable.less b/src/assets/style/variable.less index ca95eb7..a1e5475 100644 --- a/src/assets/style/variable.less +++ b/src/assets/style/variable.less @@ -25,6 +25,8 @@ --tui-bezier: cubic-bezier(.19, .1, .22, 1); --tui-shadow-color: rgba(0, 0, 0, .2); --tui-radius-default: 0; + --tui-radius-small: .5rem; + --tui-radius-medium: 1rem; each(@tuiColors, { --tui-@{key}: @value; diff --git a/src/components/markdown-view/index.ts b/src/components/markdown-view/index.ts index ee15fa5..d620980 100644 --- a/src/components/markdown-view/index.ts +++ b/src/components/markdown-view/index.ts @@ -1,6 +1,5 @@ import view from "./index.vue"; import WebToolkit from "../../utils/WebToolkit"; -import "./style.less"; export const MarkdownView = WebToolkit.withInstall(view); export default MarkdownView; diff --git a/src/components/markdown-view/style.less b/src/components/markdown-view/style.less deleted file mode 100644 index 9a187be..0000000 --- a/src/components/markdown-view/style.less +++ /dev/null @@ -1,339 +0,0 @@ -@import url("../../assets/style/variable"); - -.tui-markdown-view { - font-size: 14px; - line-height: 1.5; - - h1, - h2, - h3, - h4, - h5, - h6 { - margin: 2rem 0 .5rem 0; - padding: .25rem 1rem; - position: relative; - border-left: .4rem solid var(--tui-light-blue); - font-weight: bold; - } - - p:first-child, - h1:first-child, - h2:first-child, - h3:first-child, - h4:first-child, - h5:first-child, - h6:first-child { - margin: 0; - } - - h1:hover a.anchor, - h2:hover a.anchor, - h3:hover a.anchor, - h4:hover a.anchor, - h5:hover a.anchor, - h6:hover a.anchor { - text-decoration: none; - } - - h2 a, - h3 a { - color: #34495E; - } - - h1 { - font-size: 1rem; - line-height: 1.2; - } - - h2 { - font-size: 1rem; - line-height: 1.2; - } - - h3 { - font-size: 1rem; - line-height: 1.2; - } - - h4 { - font-size: 1rem; - } - - h5 { - font-size: .8rem; - } - - h6 { - color: #777; - font-size: 1rem; - } - - p, - ul, - ol, - dl, - table, - blockquote { - margin: .5rem 0; - min-height: 2em; - } - - p { - text-indent: 2em; - } - - blockquote p { - text-indent: 0; - } - - code { - padding: .2em .5em; - background: #EEE; - box-sizing: border-box; - border-radius: 2px; - } - - li > ol, - li > ul { - margin: 0 0; - } - - li > p { - text-indent: 0; - } - - hr { - height: 2px; - margin: 16px 0; - border: 0 none; - padding: 0; - overflow: hidden; - background: #E7E7E7; - box-sizing: content-box; - } - - h1 p, - h2 p, - h3 p, - h4 p, - h5 p, - h6 p { - margin-top: 0; - } - - li p.first { - display: inline-block; - } - - ul, - ol { - padding-left: 30px; - } - - ul:first-child, - ol:first-child { - margin-top: 0; - } - - ul:last-child, - ol:last-child { - margin-bottom: 0; - } - - ul { - list-style-type: disc; - } - - video { - width: 100%; - background: #000; - } - - iframe { - width: 100%; - height: 520px; - } - - blockquote { - padding: 2px 10px; - background: rgba(153, 153, 153, .1); - border-left: 4px solid #EDEDED; - } - - table { - padding: 0; - margin: 0 auto; - min-width: 240px; - max-width: 100%; - word-break: initial; - border-spacing: 0; - border-collapse: collapse; - } - - table thead { - background: #F2F2F2; - } - - table tr { - margin: 0; - padding: 0; - border-top: 1px solid #DFE2E5; - } - - table tr:nth-child(2n) { - background-color: #FAFAFA; - } - - table tr th { - border: 1px solid #DFE2E5; - margin: 0; - padding: 2px 13px; - text-align: left; - font-weight: bold; - border-bottom: 0; - } - - table tr td { - border: 1px solid #DFE2E5; - margin: 0; - padding: 0 13px; - word-wrap: break-word; - word-break: break-all; - text-align: left; - white-space: normal; - } - - table tr th:first-child, - table tr td:first-child { - margin-top: 0; - } - - table tr th:last-child, - table tr td:last-child { - margin-bottom: 0; - } - - tt { - color: #e96900; - padding: 2px 4px; - font-size: 0.92rem; - background: #F8F8F8; - border-radius: 2px; - } - - tt { - margin: 0 2px; - } - - .block { - display: block; - } - - .center { - text-align: center; - justify-content: center; - } - - .border { - border: 1px solid #525870; - } - - .media { - margin: .5rem auto; - display: block; - max-width: 100%; - - + .media-tips { - color: #777; - display: block; - text-align: center; - margin-bottom: 2rem; - } - } - - // 代码 - pre[class*="language-"] { - border: 1px solid #B8BBC9; - padding: 0 !important; - position: relative; - overflow: auto; - font-size: 14px; - background: transparent; - max-height: var(--data-max-height); - transition: max-height .5s var(--tui-bezier); - line-height: 1; - border-radius: 0; - - code { - color: #333; - background: transparent; - text-shadow: none !important; - - .line-numbers-rows { - left: 0; - float: left; - z-index: 1; - position: sticky; - background: rgba(242, 242, 242, .9); - letter-spacing: 1px; - - >span::before { - padding-right: .2rem; - } - } - - .codes { - position: absolute; - min-width: calc(100% - 4.6em); - padding-right: .5em; - - .token.namespace { - opacity: 1; - } - - .token.punctuation { - color: #333; - } - - .token.constant { - color: #FF7A9B; - } - - .token.annotation { - color: purple; - } - - .token.function { - color: #777; - } - - .token.class-name { - color: #FF461F; - } - - .token.generics .class-name { - color: #895532; - font-weight: bold; - } - - .token.comment { - color: #999; - } - - .token.string { - color: #55AA55; - } - - .token.number { - color: #EB9354; - } - - .token.keyword, - .token.boolean { - color: #177CB0; - } - } - } - } -} diff --git a/src/components/prism-code-block.less b/src/components/prism-code-block.less index 5194f34..ff72bbf 100644 --- a/src/components/prism-code-block.less +++ b/src/components/prism-code-block.less @@ -1,6 +1,7 @@ .tui-markdown-view, .tui-code-editor, .tp-content-body { + img, video, iframe.tp-iframe { @@ -30,19 +31,44 @@ table { width: 100%; margin: 1rem 0; + border: 1px solid var(--tui-component-border, #dfe4ea); + overflow: hidden; + background: var(--tui-bg-color-container, #fff); + border-radius: var(--tui-radius-small, .5rem); border-spacing: 0; - border-collapse: collapse; - } + border-collapse: separate; - th, - td { - padding: .5rem .75rem; - vertical-align: middle; - border: 1px solid var(--tui-component-border, #dcdcdc); - } + tr { - th { - background: var(--tui-bg-color-container-hover, #f6f6f6); + th, + td { + color: var(--tui-text-color-primary, #263238); + padding: .5rem 1rem; + line-height: 1.5; + vertical-align: middle; + } + + th { + font-weight: 600; + background: var(--tui-bg-color-container-hover, #f5f8fc); + white-space: nowrap; + + +th { + border-left: 1px solid var(--tui-component-border, #eef1f5); + } + } + + td { + + +td { + border-left: 1px solid var(--tui-component-border, #eef1f5); + } + } + + &:not(:last-child) td { + border-bottom: 1px solid var(--tui-component-border, #e8ebf0); + } + } } pre[class*="language-"] { @@ -58,7 +84,6 @@ margin: 0; padding: 0; display: block; - font-size: 1rem; background: transparent; text-shadow: none; line-height: 1.5; @@ -177,4 +202,3 @@ padding: 2px; } } - diff --git a/src/utils/Prism.ts b/src/utils/Prism.ts index d96877f..4a2f91f 100644 --- a/src/utils/Prism.ts +++ b/src/utils/Prism.ts @@ -7,6 +7,7 @@ import "prismjs/components/prism-css"; import "prismjs/components/prism-ini"; import "prismjs/components/prism-java"; import "prismjs/components/prism-javascript"; +import "prismjs/components/prism-groovy"; import "prismjs/components/prism-json"; import "prismjs/components/prism-less"; import "prismjs/components/prism-markup"; @@ -31,6 +32,7 @@ export const supportedCodeLanguages: CodeLanguageOption[] = [ { label: "CSS", value: "css" }, { label: "HTML", value: "html" }, { label: "INI", value: "ini" }, + { label: "Groovy", value: "groovy" }, { label: "Java", value: "java" }, { label: "JavaScript", value: "javascript" }, { label: "JSON", value: "json" }, diff --git a/vite.config.ts b/vite.config.ts index fad9817..34cacef 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -64,6 +64,7 @@ export default defineConfig({ "yaml", "java", "nginx", + "groovy", "javascript", "typescript", "apacheconf",