Просмотр исходного кода

:sparkles: 添加 ant design 内容主题 #676

Liyuan Li 5 лет назад
Родитель
Сommit
f5d70c3314

+ 1 - 0
CHANGELOG.md

@@ -80,6 +80,7 @@
 
 ### v3.4.6 / 2020-08-xx
 
+* [676](https://github.com/Vanessa219/vditor/issues/676) 请求:增加 Ant Design 主题 `引入特性`
 * [703](https://github.com/Vanessa219/vditor/issues/703) codeblock with backspace(IR) `修复缺陷`
 * [708](https://github.com/Vanessa219/vditor/issues/708) linkToImgUrl 方法添加 token `改进功能`
 * [701](https://github.com/Vanessa219/vditor/issues/701) 复制到微信、知乎的改进 `改进功能`

+ 4 - 2
demo/render.js

@@ -58,12 +58,14 @@ window.setTheme = (theme) => {
   const outlineElement = document.getElementById('outline')
   if (theme === 'dark') {
     Vditor.setCodeTheme('native')
-    Vditor.setContentTheme('dark', 'https://cdn.jsdelivr.net/npm/vditor/dist/css/content-theme')
+    Vditor.setContentTheme('dark',
+      'https://cdn.jsdelivr.net/npm/vditor/dist/css/content-theme')
     outlineElement.classList.add('dark')
     document.querySelector('html').style.backgroundColor = '#2f363d'
   } else {
     Vditor.setCodeTheme('github')
-    Vditor.setContentTheme('light', 'https://cdn.jsdelivr.net/npm/vditor/dist/css/content-theme')
+    Vditor.setContentTheme('light',
+      'https://cdn.jsdelivr.net/npm/vditor/dist/css/content-theme')
     outlineElement.classList.remove('dark')
     document.querySelector('html').style.backgroundColor = '#fff'
   }

+ 1 - 1
src/assets/scss/_content.scss

@@ -108,7 +108,7 @@
   &-counter {
     padding: 3px;
     color: var(--toolbar-icon-color);
-    background-color: var(--code-background-color);
+    background-color: var(--count-background-color);
     border-radius: 3px;
     font-size: 12px;
     user-select: none;

+ 2 - 11
src/assets/scss/_ir.scss

@@ -37,8 +37,8 @@
       transition: $transition;
     }
 
-    .vditor-ir__preview code:not(.hljs):not(.highlight-chroma) {
-      background-color: var(--preview-background-color);
+    .vditor-ir__marker--pre code {
+       background-color: var(--code-background-color) !important;
     }
 
     &--hidden {
@@ -89,15 +89,6 @@
 
         &--pre {
           color: var(--textarea-text-color);
-
-          .language-mermaid,
-          .language-math,
-          .language-graphviz,
-          .language-echarts,
-          .language-mindmap {
-            background-color: var(--code-background-color) !important;
-            height: auto;
-          }
         }
       }
 

+ 1 - 18
src/assets/scss/_reset.scss

@@ -83,15 +83,11 @@
     }
 
     h1 {
-      padding-bottom: 0.3em;
       font-size: 1.75em;
-      border-bottom: 1px solid #eaecef;
     }
 
     h2 {
-      padding-bottom: 0.3em;
       font-size: 1.55em;
-      border-bottom: 1px solid #eaecef;
     }
 
     h3 {
@@ -191,19 +187,6 @@
       background-size: 20px 20px;
       white-space: pre-wrap;
       background-color: rgba(27, 31, 35, .05);
-
-      &.language-mermaid,
-      &.language-math,
-      &.language-graphviz,
-      &.language-echarts,
-      &.language-mindmap {
-        background-color: rgba(27, 31, 35, .02);
-      }
-
-    }
-
-    .language-abc {
-      background-color: rgba(27, 31, 35, .02);
     }
 
     pre {
@@ -283,7 +266,7 @@
   }
 
   &-task {
-    list-style: none;
+    list-style: none !important;
     word-break: break-all;
 
     input {

+ 0 - 4
src/assets/scss/_wysiwyg.scss

@@ -70,10 +70,6 @@
     cursor: pointer;
     white-space: initial;
     min-height: 27px;
-
-    code:not(.hljs):not(.highlight-chroma) {
-      background-color: var(--preview-background-color);
-    }
   }
 
   & > .vditor-reset > h1:before,

+ 2 - 4
src/assets/scss/index.scss

@@ -29,8 +29,7 @@ $max-width: 520px !default;
   --resize-hover-icon-color: var(--panel-background-color);
   --resize-hover-background-color: var(--toolbar-icon-hover-color);
 
-  --code-background-color: rgba(27, 31, 35, .05);
-  --preview-background-color: rgba(27, 31, 35, .02);
+  --count-background-color:rgba(27, 31, 35, .05);
   --heading-border-color: #eaecef;
   --blockquote-color: #6a737d;
 
@@ -60,8 +59,7 @@ $max-width: 520px !default;
     --resize-hover-icon-color: var(--toolbar-icon-hover-color);
     --resize-hover-background-color: rgba(185, 185, 185, .86);
 
-    --code-background-color: #{rgba($blurColor, .36)};
-    --preview-background-color: rgba(120, 146, 190, 0.55);
+    --count-background-color:  #{rgba($blurColor, .36)};
     --heading-border-color: var(--textarea-text-color);
     --blockquote-color: var(--toolbar-icon-color);
 

+ 212 - 0
src/css/content-theme/ant-design.css

@@ -0,0 +1,212 @@
+/*!
+ * Vditor - A markdown editor written in TypeScript.
+ *
+ * MIT License
+ *
+ * Copyright (c) 2018-present B3log 开源, b3log.org
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ *
+ */
+
+.vditor-reset {
+    color: rgba(0, 0, 0, .85);
+    font-size: 14px;
+    line-height: 2;
+}
+
+.vditor-reset img {
+    max-width: calc(100% - 32px);
+}
+
+.vditor-reset p > img {
+    margin: 34px 0;
+    box-shadow: 0 8px 20px rgba(143, 168, 191, 0.35);
+}
+
+.vditor-reset h1 {
+    margin-bottom: 20px;
+    color: rgba(0, 0, 0, .85);
+    font-weight: 500;
+    font-size: 30px;
+    font-family: Avenir, -apple-system, BlinkMacSystemFont, segoe ui, Roboto, helvetica neue, Arial, noto sans, sans-serif, apple color emoji, segoe ui emoji, segoe ui symbol, noto color emoji, sans-serif;
+    line-height: 38px
+}
+
+.vditor-reset h2 {
+    font-size: 24px;
+    line-height: 32px;
+}
+
+.vditor-reset h2,
+.vditor-reset h3,
+.vditor-reset h4,
+.vditor-reset h5,
+.vditor-reset h6 {
+    clear: both;
+    margin: 1.6em 0 .6em;
+    color: rgba(0, 0, 0, .85);
+    font-weight: 500;
+    font-family: Avenir, -apple-system, BlinkMacSystemFont, segoe ui, Roboto, helvetica neue, Arial, noto sans, sans-serif, apple color emoji, segoe ui emoji, segoe ui symbol, noto color emoji, sans-serif
+}
+
+.vditor-reset h3 {
+    font-size: 18px;
+}
+
+.vditor-reset h4 {
+    font-size: 16px;
+}
+
+.vditor-reset h5 {
+    font-size: 14px;
+}
+
+.vditor-reset h6 {
+    font-size: 12px;
+}
+
+.vditor-reset hr {
+    clear: both;
+    height: 1px;
+    margin: 56px 0;
+    background: #f0f0f0;
+    border: 0;
+}
+
+.vditor-reset p,
+.vditor-reset pre {
+    margin: 1em 0;
+}
+
+.vditor-reset ul > li {
+    margin-left: 20px;
+    padding-left: 4px;
+    list-style-type: circle;
+}
+
+.vditor-reset ol > li {
+    margin-left: 20px;
+    padding-left: 4px;
+    list-style-type: decimal;
+}
+
+.vditor-reset ul > li > p,
+.vditor-reset ol > li > p {
+    margin: 0.2em 0;
+}
+
+.vditor-reset code {
+    margin: 0 1px;
+    padding: .2em .4em;
+    font-size: .9em;
+    border-radius: 3px;
+    border: 1px solid #f0f0f0;
+    font-family: sfmono-regular, Consolas, liberation mono, Menlo, Courier, monospace;
+}
+
+.vditor-reset code:not(.hljs):not(.highlight-chroma) {
+    background: #f2f4f5;
+    color: rgba(0, 0, 0, .65);
+    --code-background-color: #f2f4f5;
+}
+
+.vditor-reset pre {
+    font-family: sfmono-regular, Consolas, liberation mono, Menlo, Courier, monospace;
+    border-radius: 2px;
+}
+
+.vditor-reset pre code:not(.hljs):not(.highlight-chroma), .vditor-reset .language-abc {
+    margin: 0;
+    padding: 16px 32px;
+    overflow: auto;
+    color: rgba(0, 0, 0, .85);
+    font-size: 13px;
+    direction: ltr;
+    text-align: left;
+    background: #f6f8fa;
+}
+
+.vditor-reset strong,
+.vditor-reset b {
+    font-weight: 500;
+}
+
+.vditor-reset > table {
+    width: 100%;
+    margin: 8px 0 16px;
+    direction: ltr;
+    empty-cells: show;
+    border: 1px solid #f0f0f0;
+    border-collapse: collapse;
+    border-spacing: 0
+}
+
+.vditor-reset > table th {
+    color: #5c6b77;
+    font-weight: 500;
+    white-space: nowrap;
+    background: rgba(0, 0, 0, .02)
+}
+
+.vditor-reset > table th, .vditor-reset > table td {
+    padding: 16px 24px;
+    text-align: left;
+    border: 1px solid #f0f0f0
+}
+
+.vditor-reset blockquote {
+    margin: 1em 0;
+    padding-left: .8em;
+    color: rgba(0, 0, 0, .45);
+    font-size: 90%;
+    border-left: 4px solid #f0f0f0
+}
+
+.vditor-reset blockquote p {
+    margin: 0;
+}
+
+.vditor-reset .vditor-anchor {
+    margin-left: 8px;
+    opacity: 0;
+    transition: opacity 0.3s;
+}
+
+.vditor-reset h1:hover .vditor-anchor,
+.vditor-reset h2:hover .vditor-anchor,
+.vditor-reset h3:hover .vditor-anchor,
+.vditor-reset h4:hover .vditor-anchor,
+.vditor-reset h5:hover .vditor-anchor,
+.vditor-reset h6:hover .vditor-anchor {
+    display: inline-block;
+    opacity: 1;
+}
+
+.vditor-reset > br,
+.vditor-reset > p > br {
+    clear: both;
+}
+
+.vditor-reset a, .vditor-ir__link {
+    color: #1890ff;
+    text-decoration: none;
+    outline: none;
+    cursor: pointer;
+}

+ 4 - 7
src/css/content-theme/dark.css

@@ -33,6 +33,7 @@
 }
 
 .vditor-reset h1, .vditor-reset h2 {
+    padding-bottom: 0.3em;
     border-bottom: 1px solid #d1d5da
 }
 
@@ -63,15 +64,11 @@
 }
 
 .vditor-reset code:not(.hljs):not(.highlight-chroma) {
-    background-color: rgba(66, 133, 244, .36)
+    background-color: rgba(66, 133, 244, .36);
+    --code-background-color: rgba(66, 133, 244, .36);
 }
 
-.vditor-reset code:not(.hljs):not(.highlight-chroma).language-echarts,
-.vditor-reset code:not(.hljs):not(.highlight-chroma).language-mindmap,
-.vditor-reset code:not(.hljs):not(.highlight-chroma).language-graphviz,
-.vditor-reset code:not(.hljs):not(.highlight-chroma).language-math,
-.vditor-reset code:not(.hljs):not(.highlight-chroma).language-mermaid,
-.vditor-reset .language-abc {
+.vditor-reset pre code:not(.hljs):not(.highlight-chroma), .vditor-reset .language-abc {
     background-color: rgba(120, 146, 190, .55)
 }
 

+ 3 - 6
src/css/content-theme/light.css

@@ -25,6 +25,7 @@
  *
  */
 .vditor-reset h1, .vditor-reset h2 {
+    padding-bottom: 0.3em;
     border-bottom: 1px solid #eaecef;
 }
 
@@ -56,14 +57,10 @@
 
 .vditor-reset code:not(.hljs):not(.highlight-chroma) {
     background-color: rgba(27, 31, 35, .05);
+    --code-background-color: rgba(27, 31, 35, .05);
 }
 
-.vditor-reset code:not(.hljs):not(.highlight-chroma).language-echarts,
-.vditor-reset code:not(.hljs):not(.highlight-chroma).language-mindmap,
-.vditor-reset code:not(.hljs):not(.highlight-chroma).language-graphviz,
-.vditor-reset code:not(.hljs):not(.highlight-chroma).language-math,
-.vditor-reset code:not(.hljs):not(.highlight-chroma).language-mermaid,
-.vditor-reset .language-abc {
+.vditor-reset pre code:not(.hljs):not(.highlight-chroma), .vditor-reset .language-abc {
     background-color: rgba(27, 31, 35, .02);
 }
 

+ 8 - 10
src/css/content-theme/wechat.css

@@ -38,7 +38,6 @@
     text-align: center;
     color: rgb(26, 173, 25);
     font-size: 24px;
-    border-bottom: 0;
     background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAACCAYAAABYBvyLAAAAGElEQVQImWNkXs/wn4GKgImahjEwMDAAAA6aAbVUOzXRAAAAAElFTkSuQmCC);
     background-repeat: no-repeat;
     background-position: center bottom;
@@ -48,7 +47,6 @@
     font-weight: 400;
     text-align: center;
     font-size: 20px;
-    border-bottom: 0;
 }
 
 .vditor-reset h3,
@@ -74,20 +72,20 @@
     margin: 1em 0;
 }
 
-.vditor-reset code:not(.hljs):not(.highlight-chroma) {
-    background-color: rgba(0, 0, 0, 0.03);
+.vditor-reset code {
     font-size: 14px;
-    color: #333;
     border: 1px solid #f0f0f0;
     border-radius: 2px;
 }
 
-.vditor-reset code:not(.hljs):not(.highlight-chroma).language-echarts,
-.vditor-reset code:not(.hljs):not(.highlight-chroma).language-mindmap,
-.vditor-reset code:not(.hljs):not(.highlight-chroma).language-graphviz,
-.vditor-reset code:not(.hljs):not(.highlight-chroma).language-math,
-.vditor-reset code:not(.hljs):not(.highlight-chroma).language-mermaid {
+.vditor-reset code:not(.hljs):not(.highlight-chroma) {
     background-color: rgba(0, 0, 0, 0.03);
+    color: #333;
+    --code-background-color: rgba(0, 0, 0, 0.03);
+}
+
+.vditor-reset pre code:not(.hljs):not(.highlight-chroma), .vditor-reset .language-abc {
+    background-color: rgba(0, 0, 0, 0.02);
     font-size: 14px;
     border: 1px solid #f0f0f0;
     border-radius: 2px;

+ 4 - 3
src/ts/constants.ts

@@ -47,9 +47,10 @@ export abstract class Constants {
     public static readonly THEME_OPTIONS = {
         current: "light",
         list: {
-            dark: "Dark",
-            light: "Light",
-            wechat: "WeChat",
+            "ant-design": "Ant Design",
+            "dark": "Dark",
+            "light": "Light",
+            "wechat": "WeChat",
         },
         path: `${Constants.CDN}/dist/css/content-theme`,
     };