diff --git a/src/pages/Create/components/Editor/editor.scss b/src/pages/Create/components/Editor/editor.scss index 0d37850..083f04f 100644 --- a/src/pages/Create/components/Editor/editor.scss +++ b/src/pages/Create/components/Editor/editor.scss @@ -1,204 +1,96 @@ .markdown-body { - color: #595959; - font-size: 15px; - font-family: -apple-system, system-ui, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif; - // background-image: linear-gradient(90deg, rgba(60, 10, 30, 0.04) 3%, rgba(0, 0, 0, 0) 3%), linear-gradient(360deg, rgba(60, 10, 30, 0.04) 3%, rgba(0, 0, 0, 0) 3%); - // background-size: 20px 20px; - // background-position: center center; -} + pre { + margin: 15px 0; -/* 段落 */ -.markdown-body p { - color: #595959; - font-size: 15px; - line-height: 2; - font-weight: 400; -} + code.hljs { + border-radius: 10px; + font-weight: 400; + } + } -/* 段落间距控制 */ -.markdown-body p+p { - margin-top: 16px; -} + h1, + h2, + h3, + h4, + h5, + h6 { + @apply text-black transition-colors; + } -/* 标题的通用设置 */ -.markdown-body h1, -.markdown-body h2, -.markdown-body h3, -.markdown-body h4, -.markdown-body h5, -.markdown-body h6 { - padding: 30px 0; - margin: 0; - color: #135ce0; -} + h1 { + @apply text-2xl my-4 pb-3 border-b border-[#eee]; -/* 一级标题 */ -.markdown-body h1 { - position: relative; - text-align: center; - font-size: 32px; - margin: 50px 0; - padding: 0; -} + &::before { + content: "✨️"; + @apply pr-3; + } + } -/* 一级标题前缀，用来放背景图，支持透明度控制 */ -// .markdown-body h1:before { -// position: absolute; -// content: ""; -// top: -10px; -// left: 50%; -// width: 32px; -// height: 32px; -// transform: translateX(-50%); -// background-size: 100% 100%; -// opacity: .36; -// background-repeat: no-repeat; -// background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAABfVBMVEX///8Ad/8AgP8AgP8AgP8Aff8AgP8Af/8AgP8AVf8Af/8Af/8AgP8AgP8Af/8Afv8AAP8Afv8Afv8Aef8AgP8AdP8Afv8AgP8AgP8Acf8Ae/8AgP8Af/8AgP8Af/8Af/8AfP8Afv8AgP8Af/8Af/8Afv8Afv8AgP8Afv8AgP8Af/8Af/8AgP8AgP8Afv8AgP8Af/8AgP8AgP8AgP8Ae/8Afv8Af/8AgP8Af/8AgP8Af/8Af/8Aff8Af/8Abf8AgP8Af/8AgP8Af/8Af/8Afv8AgP8AgP8Afv8Afv8AgP8Af/8Aff8AgP8Afv8AgP8Aff8AgP8AfP8AgP8Ae/8AgP8Af/8AgP8AgP8AgP8Afv8AgP8AgP8AgP8Afv8AgP8AgP8AgP8AgP8AgP8Af/8AgP8Af/8Af/8Aev8Af/8AgP8Aff8Afv8AgP8AgP8AgP8Af/8AgP8Af/8Af/8AgP8Afv8AgP8AgP8AgP8AgP8Af/8AeP8Af/8Af/8Af//////rzEHnAAAAfXRSTlMAD7CCAivatxIDx5EMrP19AXdLEwgLR+6iCR/M0yLRzyFF7JupSXn8cw6v60Q0QeqzKtgeG237HMne850/6Qeq7QaZ+WdydHtj+OM3qENCMRYl1B3K2U7wnlWE/mhlirjkODa9FN/BF7/iNV/2kASNZpX1Wlf03C4stRGxgUPclqoAAAABYktHRACIBR1IAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4gEaBzgZ4yeM3AAAAT9JREFUOMvNUldbwkAQvCAqsSBoABE7asSOBRUVVBQNNuy9996789+9cMFAMHnVebmdm+/bmdtbQv4dOFOW2UjPzgFyLfo6nweKfIMOBYWwFtmMPGz2Yj2pJI0JDq3udJW6VVbmKa9I192VQFV1ktXUAl5NB0cd4KpnORqsEO2ZIRpF9gJfE9Dckqq0KuZt7UAH5+8EPF3spjsRpCeQNO/tA/qDwIDA+OCQbBoKA8NOdjMySgcZGVM6jwcgRuUiSs0nlPFNSrEpJfU0jTLD6llqbvKxei7OzvkFNQohi0vAsj81+MoqsCaoPOQFgus/1LyxichW+hS2JWCHZ7VlF9jb187pIAYcHiViHAMnp5mTjJ8B5xeEXF4B1ze/fTh/C0h398DDI9HB07O8ci+vRBdvdGnfP4gBuM8vw7X/G3wDmFhFZEdxzjMAAAAldEVYdGRhdGU6Y3JlYXRlADIwMTgtMDEtMjZUMDc6NTY6MjUrMDE6MDA67pVWAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDE4LTAxLTI2VDA3OjU2OjI1KzAxOjAwS7Mt6gAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAAWdEVYdFRpdGxlAGp1ZWppbl9sb2dvIGNvcHlxapmKAAAAV3pUWHRSYXcgcHJvZmlsZSB0eXBlIGlwdGMAAHic4/IMCHFWKCjKT8vMSeVSAAMjCy5jCxMjE0uTFAMTIESANMNkAyOzVCDL2NTIxMzEHMQHy4BIoEouAOoXEXTyQjWVAAAAAElFTkSuQmCC); -// } + h2 { + @apply relative text-lg my-4 pl-5; -/* 二级标题 */ -.markdown-body h2 { - position: relative; - font-size: 20px; - border-left: 4px solid; - padding: 0 0 0 10px; - margin: 30px 0; -} + &::before { + content: ""; + @apply absolute left-0 top-[50%] -translate-y-1/2 w-2 h-full bg-primary; + } + } -/* 三级标题 */ -.markdown-body h3 { - font-size: 16px; -} + h3 { + @apply relative text-lg my-3 pl-5; -/* 无序列表 */ -.markdown-body ul { - list-style: disc outside; - margin-left: 2em; - margin-top: 1em; -} + &::before { + content: "#"; + @apply absolute left-0 top-[50%] -translate-y-1/2 text-primary; + } + } -/* 无序列表内容 */ -.markdown-body li { - line-height: 2; - color: #595959; - margin-bottom: 0; - list-style: inherit; -} + h4, + h5, + h6 { + @apply relative text-lg my-3; + } -.markdown-body img { - max-width: 100%; -} + hr { + @apply my-5 border-[#eee] transition-colors; + } -/* 已加载图片 */ -.markdown-body img.loaded { - margin: 0 auto; - display: block; -} + p code, + ul code { + @apply bg-primary text-white rounded-md py-1 px-2 text-sm transition-colors; + } -/* 引用 */ -.markdown-body blockquote { - background: #fff9f9; - margin: 2em 0; - padding: 2px 20px; - border-left: 4px solid #b2aec5; -} + li { + @apply my-2.5; + } -/* 引用文字 */ -.markdown-body blockquote p { - color: #666; - line-height: 2; -} + a { + @apply text-primary + } -/* 链接 */ -.markdown-body a { - color: #036aca; - border-bottom: 1px solid rgba(3, 106, 202, .8); - font-weight: 400; - text-decoration: none; -} + p { + @apply leading-9 mb-2; -/* 加粗 */ -.markdown-body strong { - color: #036aca; -} + img { + // 图片模糊 + @apply rounded-xl cursor-pointer transition-all; + } + } -/* 加粗斜体 */ -.markdown-body em strong { - color: #036aca; -} + strong { + @apply text-[15px]; + } -/* 分隔线 */ -.markdown-body hr { - border-top: 1px solid #135ce0; -} + tr, + th, + td { + @apply border p-[10px_20px]; + } -/* 代码 */ -.markdown-body pre { - overflow: auto; -} - -.markdown-body pre, -.markdown-body code { - overflow: auto; - position: relative; - line-height: 1.75; - font-family: Menlo, Monaco, Consolas, Courier New, monospace; -} - -.markdown-body pre>code { - font-size: 12px; - padding: 15px 12px; - margin: 0; - word-break: normal; - display: block; - overflow-x: auto; - color: #DCDCDC; - background: #1E1E1E; - border-radius: 5px; -} - -.markdown-body code { - word-break: break-word; - border-radius: 2px; - overflow-x: auto; - background-color: #fff5f5; - color: #ff502c; - font-size: .87em; - padding: .065em .4em; -} - -/* 表格 */ -.markdown-body table { - border-collapse: collapse; - margin: 1rem 0; - overflow-x: auto; -} - -.markdown-body table th, -.markdown-body table td { - border: 1px solid #dfe2e5; - padding: .6em 1em; -} - -.markdown-body table tr { - border-top: 1px solid #dfe2e5; -} - -.markdown-body table tr:nth-child(2n) { - background-color: #f6f8fa; -} - -/* - From: icewolf-sec (御坂19008号) - Description: 新增HTML5 键盘文字标签样式 - */ -.markdown-body kbd { - color: white; - background-color: #135ce0; - border: 1px solid #135ce0; - border-radius: 5px; - padding: 2px; - font-weight: bold; - margin: auto 5px auto; - font-size: small; + input[type="checkbox"] { + width: 16px; + height: 16px; + border-radius: 4px; + position: relative; + cursor: not-allowed; + } } \ No newline at end of file diff --git a/src/pages/Create/components/Editor/index.scss b/src/pages/Create/components/Editor/index.scss index 432d4c6..246c3d2 100644 --- a/src/pages/Create/components/Editor/index.scss +++ b/src/pages/Create/components/Editor/index.scss @@ -1,7 +1,7 @@ @import url(./editor.scss); .bytemd { - height: 700px; + height: 80vh; border: none; .bytemd-toolbar { diff --git a/src/pages/Create/components/Editor/index.tsx b/src/pages/Create/components/Editor/index.tsx index 9b7e1d8..82d3938 100644 --- a/src/pages/Create/components/Editor/index.tsx +++ b/src/pages/Create/components/Editor/index.tsx @@ -1,5 +1,4 @@ -import { useEffect, useState } from 'react' -import { Editor, Viewer } from '@bytemd/react' +import { Editor } from '@bytemd/react' import 'bytemd/dist/index.css' import highlight from '@bytemd/plugin-highlight' import 'highlight.js/styles/vs2015.css';