添加代码插件 (#704)

* 添加代码插件 * 修改代码语法错误 * 修改代码逻辑错误 * Update src/client/view/components/TkComments.vue Co-authored-by: iMaeGoo <mail1st@qq.com> * Update src/client/view/components/TkComments.vue Co-authored-by: iMaeGoo <mail1st@qq.com> * Update src/client/view/components/TkComments.vue Co-authored-by: iMaeGoo <mail1st@qq.com> * Update src/client/view/components/TkComments.vue Co-authored-by: iMaeGoo <mail1st@qq.com> * Update src/client/view/components/TkComments.vue Co-authored-by: iMaeGoo <mail1st@qq.com> * Update src/client/view/components/TkComments.vue Co-authored-by: iMaeGoo <mail1st@qq.com> --------- Co-authored-by: iMaeGoo <mail1st@qq.com>
twikoojs · May 25, 2024 · d53739a · d53739a
1 parent 3538bbd
commit d53739a
Show file tree

Hide file tree

Showing 8 changed files with 57 additions and 7 deletions.
diff --git a/src/client/utils/highlight.js b/src/client/utils/highlight.js
@@ -4,16 +4,24 @@ const PRISM_CDN = 'https://cdn.staticfile.net/prism/1.28.0'
 let Prism
 let cssEl
 
-const renderCode = (el, theme) => {
+const renderCode = (el, theme, plugins) => {
   const prismCdn = (app && app.$twikoo.prismCdn) ? app.$twikoo.prismCdn : PRISM_CDN
   window.Prism = window.Prism || {}
   window.Prism.manual = true
   if (!Prism) {
     Prism = require('prismjs')
     require('prismjs/plugins/autoloader/prism-autoloader')
     Prism.plugins.autoloader.languages_path = `${prismCdn}/components/`
-    // require('prismjs/plugins/toolbar/prism-toolbar')
-    // require('prismjs/plugins/show-language/prism-show-language')
+    if (plugins) {
+      require('prismjs/plugins/toolbar/prism-toolbar')
+      plugins.split(',').map(item => { return item.trim() }).forEach(p => {
+        if (p === 'showLanguage') {
+          require('prismjs/plugins/show-language/prism-show-language')
+        } else if (p === 'copyButton') {
+          require('prismjs/plugins/copy-to-clipboard/prism-copy-to-clipboard')
+        }
+      })
+    }
   }
   loadCss(theme, prismCdn)
   Prism.highlightAllUnder(el)

diff --git a/src/client/utils/i18n/i18n.js b/src/client/utils/i18n/i18n.js
@@ -81,6 +81,11 @@ const highlightThemes = [
   'twilight'
 ].map(s => `"${s}"`)
 
+const highlightPlugins = [
+  'showLanguage',
+  'copyButton'
+].map(s => `"${s}"`)
+
 const imageBedServices = [
   'qcloud',
   '7bu',
@@ -455,6 +460,14 @@ export default {
     `Кодни таъкидлаш мавзуси. Қуйидагилардан танланг: ${highlightThemes.join(', ')}. Олдиндан кўриш учун https://prismjs.com сайтига ташриф буюринг. Агар мавзуингиз кодни ажратиб кўрсатишга зид бўлса, уни «Ҳеч» га ўрнатинг. Стандарт: йўқ.`,
     `コードハイライトのテーマ、選択肢：${highlightThemes.join('、')}、テーマの効果をプレビューするには https://prismjs.com を訪問してください。テーマとコードハイライトに競合がある場合、noneに設定してください。デフォルト：none`
   ],
+  [S.ACI + '_HIGHLIGHT_PLUGIN']: [
+    `代码高亮插件，可选：${highlightPlugins.join('、')}，分别表示：展示代码语言、展示代码拷贝按钮。可以同时设置多个选项，如果想要不添加任何代码高亮插件，请设为 none。默认：none。`,
+    `代碼高亮插件，可選：${highlightPlugins.join('、')}，分別表示：展示代碼語言、展示代碼拷貝按鈕。可以同時設置多個選項，如果想要不添加任何代碼高亮插件，請設為 none。預設：none。`,
+    `代碼高亮外掛程式，可選：${highlightPlugins.join('、')}，分別表示：展示代碼語言、展示代碼拷貝按鈕。 可以同時設置多個選項，如果想要不添加任何代碼高亮外掛程式，請設定為 none。預設：none。`,
+    `Code highlight plug-in, optional: ${highlightPlugins.join(', ')}, respectively: show code language, show code copy button. Multiple options can be set at the same time, if you want to add no code highlighting plug-ins, please set it to none. Default: none. `,
+    `Плагин подсветки кода, опционально: ${highlightPlugins.join(',')}, соответственно: показывать язык кода, показывать кнопку копирования кода. Вы можете установить несколько опций одновременно, если вы хотите не добавлять плагин подсветки кода, установите значение none. по умолчанию: none.`,
+    `コード・ハイライト・プラグイン、オプション: ${highlightPlugins.join(',')}, それぞれ: コード言語の表示、コード・コピー・ボタンの表示。 複数のオプションを同時に設定できますが、コード・ハイライト・プラグインを追加したくない場合は、noneに設定してください。`
+  ],
   [S.ACI + '_IMAGE_CDN']: [
     `插入图片所使用的图床，目前支持：${imageBedServices.join('、')}`,
     `插入圖片所使用的圖床，目前支持：${imageBedServices.join('、')}`,

diff --git a/src/client/view/components/TkAdminComment.vue b/src/client/view/components/TkAdminComment.vue
@@ -174,7 +174,7 @@ export default {
     },
     highlightCode () {
       if (this.serverConfig.HIGHLIGHT === 'true') {
-        renderCode(this.$refs['comment-list'], this.serverConfig.HIGHLIGHT_THEME)
+        renderCode(this.$refs['comment-list'], this.serverConfig.HIGHLIGHT_THEME, this.serverConfig.HIGHLIGHT_PLUGIN)
       }
     }
   },

diff --git a/src/client/view/components/TkAdminConfig.vue b/src/client/view/components/TkAdminConfig.vue
@@ -76,6 +76,7 @@ export default {
             { key: 'EMOTION_CDN', desc: t('ADMIN_CONFIG_ITEM_EMOTION_CDN'), ph: '', value: '' },
             { key: 'HIGHLIGHT', desc: t('ADMIN_CONFIG_ITEM_HIGHLIGHT'), ph: `${t('ADMIN_CONFIG_EXAMPLE')}false`, value: '' },
             { key: 'HIGHLIGHT_THEME', desc: t('ADMIN_CONFIG_ITEM_HIGHLIGHT_THEME'), ph: `${t('ADMIN_CONFIG_EXAMPLE')}tomorrow`, value: '' },
+            { key: 'HIGHLIGHT_PLUGIN', desc: t('ADMIN_CONFIG_ITEM_HIGHLIGHT_PLUGIN'), ph: `${t('ADMIN_CONFIG_EXAMPLE')}showLanguage`, value: '' },
             { key: 'LIGHTBOX', desc: t('ADMIN_CONFIG_ITEM_LIGHTBOX'), ph: `${t('ADMIN_CONFIG_EXAMPLE')}true`, value: '' }
           ]
         },

diff --git a/src/client/view/components/TkComment.vue b/src/client/view/components/TkComment.vue
@@ -198,7 +198,7 @@ export default {
       }
     },
     showContentExpandIfNeed () {
-      this.hasContentExpand = this.$refs['tk-content'].scrollHeight > 500
+      this.hasContentExpand = this.hasContentExpand || this.$refs['tk-content'].scrollHeight > 500  // 如果已经折叠就不再判断 主要是为了防止图片在onload之前就已经折叠而导致图片在onload之后取消折叠
     },
     showContentExpandIfNeedAfterImagesLoaded () {
       this.$refs['tk-content'].querySelectorAll('img').forEach((imgEl) => {
@@ -334,7 +334,7 @@ export default {
       handler: function (highlight) {
         if (highlight === 'true') {
           this.$nextTick(() => {
-            renderCode(this.$refs.comment, this.config.HIGHLIGHT_THEME)
+            renderCode(this.$refs.comment, this.config.HIGHLIGHT_THEME, this.config.HIGHLIGHT_PLUGIN)
           })
         }
       },

diff --git a/src/client/view/components/TkComments.vue b/src/client/view/components/TkComments.vue
@@ -161,4 +161,31 @@ export default {
   cursor: pointer;
   color: #409eff;
 }
+.twikoo div.code-toolbar {
+  position: relative;
+  border-radius: .3em
+}
+.twikoo div.code-toolbar>.toolbar {
+  position: absolute;
+  right: 4px;
+  top: 4px;
+  font-size: .8125rem;
+  font-weight: 500;
+  display: flex;
+}
+.twikoo div.code-toolbar>.toolbar>.toolbar-item {
+  margin-left: .3em
+}
+.twikoo div.code-toolbar>.toolbar>.toolbar-item>a,
+.twikoo div.code-toolbar>.toolbar>.toolbar-item>button,
+.twikoo div.code-toolbar>.toolbar>.toolbar-item>span {
+  padding: 2px 4px;
+  border-radius: .3em;
+}
+.twikoo div.code-toolbar>.toolbar>.toolbar-item>button {
+  border: 1px solid rgba(128, 128, 128, 0.31);
+}
+.twikoo div.code-toolbar>.toolbar>.toolbar-item>button:hover {
+  cursor: pointer;
+}
 </style>
diff --git a/src/client/view/components/TkSubmit.vue b/src/client/view/components/TkSubmit.vue
@@ -202,7 +202,7 @@ export default {
           renderLinks(this.$refs['comment-preview'])
           renderMath(this.$refs['comment-preview'], this.$twikoo.katex)
           if (this.config.HIGHLIGHT === 'true') {
-            renderCode(this.$refs['comment-preview'], this.config.HIGHLIGHT_THEME)
+            renderCode(this.$refs['comment-preview'], this.config.HIGHLIGHT_THEME, this.config.HIGHLIGHT_PLUGIN)
           }
         })
       }

diff --git a/src/server/function/twikoo/utils/index.js b/src/server/function/twikoo/utils/index.js
@@ -296,6 +296,7 @@ const fn = {
         HIDE_ADMIN_CRYPT: config.HIDE_ADMIN_CRYPT,
         HIGHLIGHT: config.HIGHLIGHT || 'true',
         HIGHLIGHT_THEME: config.HIGHLIGHT_THEME,
+        HIGHLIGHT_PLUGIN: config.HIGHLIGHT_PLUGIN,
         LIMIT_LENGTH: config.LIMIT_LENGTH,
         TURNSTILE_SITE_KEY: config.TURNSTILE_SITE_KEY
       }