feat: add Mac-style code block (doocs#183)

close doocs#168

Co-authored-by: yanglbme <[email protected]>

src/assets/scripts/converter.js

@@ -13,13 +13,10 @@ export function solveWeChatImage() {
     image.style.height = height
   }
 }
-export function solveHtml() {
-  const element = document.getElementById(`output-wrapper`)
-  let html = element.innerHTML
-  let res = ``
-  res = juice.inlineContent(html, {
+
+export function mergeCss(html) {
+  return juice(html, {
     inlinePseudoElements: true,
     preserveImportant: true,
   })
-  return res
 }

src/components/CodemirrorEditor/EditorHeader/index.vue

@@ -147,6 +147,13 @@
           <el-dropdown-item class="padding-left-3" @click.native="customStyle">
             自定义 CSS
           </el-dropdown-item>
+          <el-dropdown-item divided @click.native="codeBlockChanged">
+            <i
+              class="el-icon-check"
+              :style="{ opacity: isMacCodeBlock ? 1 : 0 }"
+            ></i>
+            Mac 代码块
+          </el-dropdown-item>
           <el-dropdown-item
             divided
             class="padding-left-3"
@@ -219,7 +226,7 @@
 
 <script>
 import { setFontSize, setColorWithCustomTemplate } from '@/assets/scripts/util'
-import { solveWeChatImage, solveHtml } from '@/assets/scripts/converter'
+import { solveWeChatImage, mergeCss } from '@/assets/scripts/converter'
 import DEFAULT_CSS_CONTENT from '@/assets/example/theme-css.txt'
 import config from '@/assets/scripts/config'
 import ResetDialog from './ResetDialog'
@@ -239,11 +246,12 @@ export default {
       },
       config: config,
       citeStatus: false,
+      isMacCodeBlock: true,
       showResetConfirm: false,
       selectFont: ``,
       selectSize: ``,
       selectColor: ``,
-      selectCodeTheme: config.codeThemeOption[0].value,
+      selectCodeTheme: config.codeThemeOption[2].value,
     }
   },
   components: {
@@ -270,6 +278,7 @@ export default {
       codeTheme: (state) => state.codeTheme,
       nightMode: (state) => state.nightMode,
       currentCiteStatus: (state) => state.citeStatus,
+      currentIsMacCodeBlock: (state) => state.isMacCodeBlock,
     }),
   },
   methods: {
@@ -349,13 +358,25 @@ export default {
       this.setCiteStatus(this.citeStatus)
       this.$emit(`refresh`)
     },
+    codeBlockChanged() {
+      this.isMacCodeBlock = !this.isMacCodeBlock
+      this.setIsMacCodeBlock(this.isMacCodeBlock)
+      this.$emit(`refresh`)
+    },
     // 复制到微信公众号
     copy() {
       this.$emit(`startCopy`)
       setTimeout(() => {
-        let clipboardDiv = document.getElementById(`output`)
         solveWeChatImage()
-        solveHtml()
+
+        const clipboardDiv = document.getElementById(`output`)
+        clipboardDiv.innerHTML = mergeCss(clipboardDiv.innerHTML)
+        if (this.isMacCodeBlock) {
+          clipboardDiv.innerHTML = clipboardDiv.innerHTML.replaceAll(
+            /(<code class="prettyprint.+?(?<=style="))/g,
+            `$1font-family: Menlo, 'Operator Mono', Consolas, Monaco, monospace;`
+          )
+        }
         clipboardDiv.focus()
         window.getSelection().removeAllRanges()
         let range = document.createRange()
@@ -397,20 +418,23 @@ export default {
     },
     // 重置样式
     confirmReset() {
+      this.showResetConfirm = false
       localStorage.clear()
       this.cssEditor.setValue(DEFAULT_CSS_CONTENT)
       this.citeStatus = false
       this.statusChanged(false)
       this.fontChanged(this.config.builtinFonts[0].value)
       this.colorChanged(this.config.colorOption[0].value)
       this.sizeChanged(this.config.sizeOption[2].value)
-      this.codeThemeChanged(this.config.codeThemeOption[0].value)
+      this.codeThemeChanged(this.config.codeThemeOption[2].value)
       this.$emit(`cssChanged`)
       this.selectFont = this.currentFont
       this.selectSize = this.currentSize
       this.selectColor = this.currentColor
-      this.showResetConfirm = false
       this.selectCodeTheme = this.codeTheme
+
+      this.isMacCodeBlock = false
+      this.codeBlockChanged()
     },
     cancelReset() {
       this.showResetConfirm = false
@@ -425,6 +449,7 @@ export default {
       `setCssEditorValue`,
       `setCurrentCodeTheme`,
       `setWxRendererOptions`,
+      `setIsMacCodeBlock`,
     ]),
   },
   mounted() {
@@ -433,6 +458,7 @@ export default {
     this.selectColor = this.currentColor
     this.selectCodeTheme = this.codeTheme
     this.citeStatus = this.currentCiteStatus
+    this.isMacCodeBlock = this.currentIsMacCodeBlock
 
     const fileInput = this.$refs.fileInput
     fileInput.onchange = () => {

src/store/index.js

@@ -19,9 +19,10 @@ const state = {
   currentFont: ``,
   currentSize: ``,
   currentColor: ``,
-  citeStatus: 0,
+  citeStatus: false,
   nightMode: false,
-  codeTheme: config.codeThemeOption[0].value,
+  codeTheme: config.codeThemeOption[2].value,
+  isMacCodeBlock: true,
 }
 const mutations = {
   setEditorValue(state, data) {
@@ -53,6 +54,10 @@ const mutations = {
     state.codeTheme = data
     localStorage.setItem(`codeTheme`, data)
   },
+  setIsMacCodeBlock(state, data) {
+    state.isMacCodeBlock = data
+    localStorage.setItem(`isMacCodeBlock`, data)
+  },
   themeChanged(state) {
     state.nightMode = !state.nightMode
     localStorage.setItem(`nightMode`, state.nightMode)
@@ -65,9 +70,10 @@ const mutations = {
     state.currentSize =
       localStorage.getItem(`size`) || config.sizeOption[2].value
     state.codeTheme =
-      localStorage.getItem(`codeTheme`) || config.codeThemeOption[0].value
+      localStorage.getItem(`codeTheme`) || config.codeThemeOption[2].value
     state.citeStatus = localStorage.getItem(`citeStatus`) === `true`
     state.nightMode = localStorage.getItem(`nightMode`) === `true`
+    state.isMacCodeBlock = !(localStorage.getItem(`isMacCodeBlock`) === `false`)
     state.wxRenderer = new WxRenderer({
       theme: setColor(state.currentColor),
       fonts: state.currentFont,
@@ -135,7 +141,7 @@ const mutations = {
     })
   },
   editorRefresh(state) {
-    let renderer = state.wxRenderer.getRenderer(state.citeStatus)
+    const renderer = state.wxRenderer.getRenderer(state.citeStatus)
     marked.setOptions({ renderer })
     let output = marked.parse(state.editor.getValue(0))
 
@@ -147,6 +153,35 @@ const mutations = {
       // 附加的一些 style
       output += state.wxRenderer.buildAddition()
     }
+
+    if (state.isMacCodeBlock) {
+      output += `
+        <style>
+          .hljs.code__pre::before {
+            position: initial;
+            padding: initial;
+            content: '';
+            display: block;
+            height: 25px;
+            background-color: transparent;
+            background-image: url("https://doocs.oss-cn-shenzhen.aliyuncs.com/img/123.svg");
+            background-position: 14px 10px;
+            background-repeat: no-repeat;
+            background-size: 40px;
+          }
+
+          .hljs.code__pre {
+            padding: 0!important;
+          }
+
+          .hljs.code__pre code {
+            display: -webkit-box;
+            padding: 0.5em 1em 1em;
+            overflow-x: auto;
+          }
+        </style>
+      `
+    }
     state.output = output
   },
 }

src/views/CodemirrorEditor.vue

@@ -526,6 +526,7 @@ export default {
     exportEditorContent() {
       this.$nextTick(() => {
         exportHTML()
+        document.getElementById(`output`).innerHTML = this.output
       })
     },
     // 导入 Markdown 文档