From 49ab197ffb48a27978cff1f352559c461eabebab Mon Sep 17 00:00:00 2001
From: zhengyi <admin@mczhengyi.top>
Date: Mon, 15 Jan 2024 20:45:08 +0800
Subject: [PATCH] :bug: Clear all css style in render

Fix: https://github.com/justice2001/halo-plugin-vditor/issues/17
Fix: https://git.mczhengyi.top/zhengyi/halo-plugin-vditor/issues/47
---
 .../mczhengyi/vditor/utils/ScriptUtils.java   |  2 +-
 src/main/resources/static/render.js           |  2 +-
 src/main/resources/static/themes/dark.css     | 13 ++++
 src/main/resources/static/themes/light.css    |  4 +
 src/main/resources/static/vditor-render.css   | 76 +++++++++++++++++++
 5 files changed, 95 insertions(+), 2 deletions(-)
 create mode 100644 src/main/resources/static/themes/dark.css
 create mode 100644 src/main/resources/static/themes/light.css
 create mode 100644 src/main/resources/static/vditor-render.css

diff --git a/src/main/java/top/mczhengyi/vditor/utils/ScriptUtils.java b/src/main/java/top/mczhengyi/vditor/utils/ScriptUtils.java
index c613db5..939ab9b 100644
--- a/src/main/java/top/mczhengyi/vditor/utils/ScriptUtils.java
+++ b/src/main/java/top/mczhengyi/vditor/utils/ScriptUtils.java
@@ -14,7 +14,7 @@ public class ScriptUtils {
 
     public static String basicScript(RenderConfig renderConfig) {
         return """
-                <link rel="stylesheet" type="text/css" href="/plugins/vditor-mde/assets/static/dist/index.css" id="vditor-style" />
+                <link rel="stylesheet" type="text/css" href="/plugins/vditor-mde/assets/static/vditor-render.css" id="vditor-style" />
                 <script src="/plugins/vditor-mde/assets/static/dist/method.min.js"></script>
                 <script src="/plugins/vditor-mde/assets/static/render.js" id="vditor-render"
                   data-dark="%s" data-mediaRender="%s"></script>
diff --git a/src/main/resources/static/render.js b/src/main/resources/static/render.js
index f843449..fa5f4e6 100644
--- a/src/main/resources/static/render.js
+++ b/src/main/resources/static/render.js
@@ -1,4 +1,4 @@
-const THEME_PREFIX="/plugins/vditor-mde/assets/static/dist/css/content-theme"
+const THEME_PREFIX="/plugins/vditor-mde/assets/static/themes"
 const CDN = "/plugins/vditor-mde/assets/static"
 
 window.addEventListener("load", () => {
diff --git a/src/main/resources/static/themes/dark.css b/src/main/resources/static/themes/dark.css
new file mode 100644
index 0000000..7cc3527
--- /dev/null
+++ b/src/main/resources/static/themes/dark.css
@@ -0,0 +1,13 @@
+/**
+This is a theme for halo-plugin-vditor
+Modified from vditor content_theme
+ */
+.vditor-reset .language-abc svg,
+.vditor-reset .language-abc path {
+    fill: currentColor;
+    color: #d1d5da;
+}
+
+.language-graphviz polygon {
+    fill: rgba(66, 133, 244, .36);
+}
diff --git a/src/main/resources/static/themes/light.css b/src/main/resources/static/themes/light.css
new file mode 100644
index 0000000..aa1be9a
--- /dev/null
+++ b/src/main/resources/static/themes/light.css
@@ -0,0 +1,4 @@
+/**
+This is a theme for halo-plugin-vditor
+Modified from vditor content_theme
+ */
\ No newline at end of file
diff --git a/src/main/resources/static/vditor-render.css b/src/main/resources/static/vditor-render.css
new file mode 100644
index 0000000..e6e3f25
--- /dev/null
+++ b/src/main/resources/static/vditor-render.css
@@ -0,0 +1,76 @@
+.vditor {
+    --border-color: #d1d5da;
+    --second-color: rgba(88, 96, 105, 0.36);
+    --panel-background-color: #fff;
+    --panel-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+    --toolbar-background-color: #f6f8fa;
+    --toolbar-icon-color: #586069;
+    --toolbar-icon-hover-color: #4285f4;
+    --toolbar-height: 35px;
+    --toolbar-divider-margin-top: 8px;
+    --textarea-background-color: #fafbfc;
+    --textarea-text-color: #24292e;
+    --resize-icon-color: var(--toolbar-icon-color);
+    --resize-background-color: var(--toolbar-background-color);
+    --resize-hover-icon-color: var(--panel-background-color);
+    --resize-hover-background-color: var(--toolbar-icon-hover-color);
+    --count-background-color: rgba(27, 31, 35, 0.05);
+    --heading-border-color: #eaecef;
+    --blockquote-color: #6a737d;
+    --ir-heading-color: #660e7a;
+    --ir-title-color: #808080;
+    --ir-bi-color: #0033b3;
+    --ir-link-color: #008000;
+    --ir-bracket-color: #0000ff;
+    --ir-paren-color: #008000;
+}
+
+.vditor-reset {
+    color: #24292e;
+    font-variant-ligatures: no-common-ligatures;
+    font-family: "Helvetica Neue", "Luxi Sans", "DejaVu Sans", "Hiragino Sans GB", "Microsoft Yahei", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", "Android Emoji", "EmojiSymbols";
+    word-wrap: break-word;
+    overflow: auto;
+    line-height: 1.5;
+    font-size: 16px;
+    word-break: break-word;
+}
+.vditor-reset--anchor {
+    padding-left: 20px;
+}
+.vditor-reset--error {
+    color: #d23f31;
+    font-size: 12px;
+    display: block;
+    line-height: 16px;
+}
+
+.vditor-reset .language-math,
+.vditor-reset .language-echarts,
+.vditor-reset .language-mindmap,
+.vditor-reset .language-plantuml,
+.vditor-reset .language-mermaid,
+.vditor-reset .language-markmap,
+.vditor-reset .language-abc,
+.vditor-reset .language-flowchart,
+.vditor-reset .language-graphviz {
+    margin-bottom: 16px;
+}
+.vditor-reset .language-math mjx-container:focus {
+    outline: none;
+    cursor: context-menu;
+}
+.vditor-reset .language-echarts,
+.vditor-reset .language-mindmap {
+    overflow: hidden;
+    height: 420px;
+}
+.vditor-reset .language-mermaid,
+.vditor-reset .language-markmap,
+.vditor-reset .language-flowchart,
+.vditor-reset .language-graphviz {
+    text-align: center;
+}
+.vditor-reset .language-graphviz parsererror {
+    overflow: auto;
+}
\ No newline at end of file