Merge pull request #104 from AmiyaBot/dev

update: 支持 Markdown 自定义样式
AmiyaBot · Jul 25, 2024 · 658f730 · 658f730
2 parents ce81ec3 + 8259fe2
commit 658f730
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 81 deletions.
diff --git a/amiyabot/_assets/markdown/template-dark.html b/amiyabot/_assets/markdown/template-dark.html
diff --git a/amiyabot/_assets/markdown/template.html b/amiyabot/_assets/markdown/template.html
@@ -6,7 +6,6 @@
           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <link rel="stylesheet" href="./style/github-markdown.css">
-    <link rel="stylesheet" href="./style/highlight/vs.min.css">
     <title>template</title>
     <style>
         * {
@@ -23,14 +22,13 @@
 
         .markdown-body {
             width: max-content;
-            max-width: 960px;
             padding: 20px;
         }
     </style>
 </head>
 <body>
 <div id="template">
-    <div class="markdown-body" v-html="markdownBody"></div>
+    <div class="markdown-body" :style="{ maxWidth: data.max_width + 'px' }" v-html="markdownBody"></div>
 </div>
 </body>
 <script src="./js/highlight.min.js"></script>
@@ -47,20 +45,45 @@
         el: '#template',
         computed: {
             markdownBody() {
-                return marked.parse(this.content)
+                return marked.parse(this.data.content)
             }
         },
         methods: {
             init(data) {
-                this.$set(this, 'content', data['content'])
+                this.loadCSSText(data.css_style)
+                this.loadCSSFiles(data.is_dark)
+
+                this.$set(this, 'data', data)
                 this.$nextTick(() => {
                     hljs.highlightAll()
                 })
+            },
+            loadCSSText(css) {
+                const style = document.createElement('style');
+                style.innerHTML = css;
+                document.head.appendChild(style);
+            },
+            loadCSSFiles(isDark) {
+                const files = isDark ?
+                    ['./style/highlight/vs2015.min.css', './style/github-markdown-dark.css'] :
+                    ['./style/highlight/vs.min.css']
+
+                for (const file of files) {
+                    const link = document.createElement('link');
+                    link.rel = 'stylesheet'
+                    link.href = file
+                    document.head.appendChild(link);
+                }
             }
         },
         data() {
             return {
-                content: ''
+                data: {
+                    content: '',
+                    max_width: 0,
+                    css_style: '',
+                    is_dark: false,
+                }
             }
         },
         mounted() {

diff --git a/amiyabot/builtin/messageChain/__init__.py b/amiyabot/builtin/messageChain/__init__.py
@@ -16,7 +16,6 @@
 class ChainConfig:
     max_length = argv('text-max-length', int) or 100
     md_template = os.path.join(cur_file_folder, '../../_assets/markdown/template.html')
-    md_template_dark = os.path.join(cur_file_folder, '../../_assets/markdown/template-dark.html')
 
 
 class Chain:
@@ -182,14 +181,21 @@ def html(
     def markdown(
         self,
         content: str,
+        max_width: int = 960,
+        css_style: str = '',
         render_time: int = DEFAULT_RENDER_TIME,
         is_dark: bool = False,
     ):
         return self.html(
-            ChainConfig.md_template_dark if is_dark else ChainConfig.md_template,
+            ChainConfig.md_template,
             width=50,
             height=50,
-            data={'content': content},
+            data={
+                'content': content,
+                'max_width': max_width,
+                'css_style': css_style,
+                'is_dark': is_dark,
+            },
             render_time=render_time,
         )