Added copy button for code fence (#24)

auroral-ui · Apr 4, 2021 · d575691 · d575691
1 parent 0f48b3f
commit d575691
Show file tree

Hide file tree

Showing 6 changed files with 57 additions and 33 deletions.
diff --git a/data/cn.yml b/data/cn.yml
@@ -1,22 +1,17 @@
 scripts:
   - <script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
-  - <script src="https://cdn.bootcdn.net/ajax/libs/prism/1.22.0/prism.min.js"></script>
-  - <script src="https://cdn.bootcdn.net/ajax/libs/prism/1.22.0/components/prism-bash.min.js"></script>
-  - <script src="https://cdn.bootcdn.net/ajax/libs/prism/1.22.0/components/prism-javascript.min.js"></script>
-  - <script src="https://cdn.bootcdn.net/ajax/libs/prism/1.22.0/components/prism-java.min.js"></script>
-  - <script src="https://cdn.bootcdn.net/ajax/libs/prism/1.22.0/components/prism-liquid.min.js"></script>
-  - <script src="https://cdn.bootcdn.net/ajax/libs/prism/1.22.0/components/prism-markdown.min.js"></script>
-  - <script src="https://cdn.bootcdn.net/ajax/libs/prism/1.22.0/components/prism-markup-templating.min.js"></script>
-  - <script src="https://cdn.bootcdn.net/ajax/libs/prism/1.22.0/components/prism-css.min.js"></script>
-  - <script src="https://cdn.bootcdn.net/ajax/libs/prism/1.22.0/components/prism-scss.min.js"></script>
-  - <script src="https://cdn.bootcdn.net/ajax/libs/prism/1.22.0/components/prism-php.min.js"></script>
+  - <script src="https://cdn.bootcdn.net/ajax/libs/prism/1.23.0/components/prism-core.min.js" data-manual></script>
+  - <script src="https://cdn.bootcdn.net/ajax/libs/prism/1.23.0/plugins/autoloader/prism-autoloader.js"></script>
+  - <script src="https://cdn.bootcdn.net/ajax/libs/prism/1.23.0/plugins/toolbar/prism-toolbar.js"></script>
+  - <script src="https://cdn.bootcdn.net/ajax/libs/prism/1.23.0/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js"></script>
   - <script src="https://cdn.bootcdn.net/ajax/libs/gitalk/1.7.0/gitalk.min.js"></script>
   - <script src="https://cdn.bootcdn.net/ajax/libs/valine/1.4.14/Valine.min.js"></script>
   - <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/av-min.js"></script>
   - <script src="https://cdn.bootcdn.net/ajax/libs/blueimp-md5/2.18.0/js/md5.min.js"></script>
   - <script src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js"></script>
 
 css:
-  - <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/prism/1.22.0/themes/prism.min.css"/>
+  - <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/prism/1.23.0/themes/prism.min.css"/>
+  - <link href="https://cdn.bootcdn.net/ajax/libs/prism/1.23.0/plugins/toolbar/prism-toolbar.css" rel="stylesheet"/>
   - <link rel="stylesheet" href="https://fonts.loli.net/css?family=Rubik" />
   - <link href="https://cdn.bootcdn.net/ajax/libs/gitalk/1.7.0/gitalk.min.css" rel="stylesheet"/>
diff --git a/data/en.yml b/data/en.yml
@@ -1,15 +1,9 @@
 scripts:
   - <script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
-  - <script src="https://cdn.jsdelivr.net/npm/[email protected]/prism.min.js"></script>
-  - <script src="https://cdn.jsdelivr.net/npm/[email protected]/components/prism-bash.min.js"></script>
-  - <script src="https://cdn.jsdelivr.net/npm/[email protected]/components/prism-javascript.min.js"></script>
-  - <script src="https://cdn.jsdelivr.net/npm/[email protected]/components/prism-java.min.js"></script>
-  - <script src="https://cdn.jsdelivr.net/npm/[email protected]/components/prism-liquid.min.js"></script>
-  - <script src="https://cdn.jsdelivr.net/npm/[email protected]/components/prism-markdown.min.js"></script>
-  - <script src="https://cdn.jsdelivr.net/npm/[email protected]/components/prism-markup-templating.min.js"></script>
-  - <script src="https://cdn.jsdelivr.net/npm/[email protected]/components/prism-css.min.js"></script>
-  - <script src="https://cdn.jsdelivr.net/npm/[email protected]/components/prism-scss.min.js"></script>
-  - <script src="https://cdn.jsdelivr.net/npm/[email protected]/components/prism-php.min.js"></script>
+  - <script src="https://cdn.jsdelivr.net/npm/[email protected]/components/prism-core.min.js" data-manual></script>
+  - <script src="https://cdn.jsdelivr.net/npm/[email protected]/plugins/autoloader/prism-autoloader.js"></script>
+  - <script src="https://cdn.jsdelivr.net/npm/[email protected]/plugins/toolbar/prism-toolbar.js"></script>
+  - <script src="https://cdn.jsdelivr.net/npm/[email protected]/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js"></script>
   - <script src="https://cdn.jsdelivr.net/npm/gitalk/1.7.0/gitalk.min.js"></script>
   - <script src="https://cdn.jsdelivr.net/npm/valine/1.4.14/Valine.min.js"></script>
   - <script src="//cdn.jsdelivr.net/npm/[email protected]/dist/av-min.js"></script>
@@ -18,5 +12,6 @@ scripts:
 
 css:
   - <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/themes/prism.min.css"/>
+  - <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/plugins/toolbar/prism-toolbar.css"/>
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Rubik"/>
     <link href="https://cdn.jsdelivr.net/npm/gitalk/1.7.0/gitalk.min.css" rel="stylesheet"/>
diff --git a/public/index.html b/public/index.html
@@ -12,20 +12,21 @@
       src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"
     ></script>
     <!-- Prismjs -->
-    <script src="https://cdn.bootcdn.net/ajax/libs/prism/1.22.0/prism.min.js"></script>
-    <script src="https://cdn.bootcdn.net/ajax/libs/prism/1.22.0/components/prism-bash.min.js"></script>
-    <script src="https://cdn.bootcdn.net/ajax/libs/prism/1.22.0/components/prism-javascript.min.js"></script>
-    <script src="https://cdn.bootcdn.net/ajax/libs/prism/1.22.0/components/prism-java.min.js"></script>
-    <script src="https://cdn.bootcdn.net/ajax/libs/prism/1.22.0/components/prism-liquid.min.js"></script>
-    <script src="https://cdn.bootcdn.net/ajax/libs/prism/1.22.0/components/prism-markdown.min.js"></script>
-    <script src="https://cdn.bootcdn.net/ajax/libs/prism/1.22.0/components/prism-markup-templating.min.js"></script>
-    <script src="https://cdn.bootcdn.net/ajax/libs/prism/1.22.0/components/prism-css.min.js"></script>
-    <script src="https://cdn.bootcdn.net/ajax/libs/prism/1.22.0/components/prism-scss.min.js"></script>
-    <script src="https://cdn.bootcdn.net/ajax/libs/prism/1.22.0/components/prism-php.min.js"></script>
+    <script
+      src="https://cdn.bootcdn.net/ajax/libs/prism/1.23.0/components/prism-core.min.js"
+      data-manual
+    ></script>
+    <script src="https://cdn.bootcdn.net/ajax/libs/prism/1.23.0/plugins/autoloader/prism-autoloader.js"></script>
+    <script src="https://cdn.bootcdn.net/ajax/libs/prism/1.23.0/plugins/toolbar/prism-toolbar.js"></script>
+    <script src="https://cdn.bootcdn.net/ajax/libs/prism/1.23.0/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js"></script>
     <link
       rel="stylesheet"
       href="https://cdn.jsdelivr.net/npm/[email protected]/themes/prism.min.css"
     />
+    <link
+      href="https://cdn.bootcdn.net/ajax/libs/prism/1.23.0/plugins/toolbar/prism-toolbar.css"
+      rel="stylesheet"
+    />
     <!-- Google rubik fonts -->
     <link
       rel="stylesheet"

diff --git a/src/models/HexoConfig.class.ts b/src/models/HexoConfig.class.ts
@@ -93,7 +93,23 @@ export class Writing {
     line_number: boolean
     auto_detect: boolean
     tab_replace: string
-  } | null = null // 代码块的设置
+  } = {
+    enable: false,
+    line_number: true,
+    auto_detect: false,
+    tab_replace: ''
+  } // 代码块的设置
+  prismjs: {
+    enable: boolean
+    preprocess: boolean
+    line_number: boolean
+    tab_replace: string
+  } = {
+    enable: true,
+    preprocess: false,
+    line_number: true,
+    tab_replace: ''
+  }
   constructor(raw?: { [key: string]: string | boolean }) {
     if (raw) {
       for (const key of Object.keys(this)) {

diff --git a/src/styles/prism-dracula.css b/src/styles/prism-dracula.css
@@ -112,6 +112,7 @@ div.code-toolbar:hover > .toolbar {
 }
 div.code-toolbar > .toolbar .toolbar-item {
   display: inline-block;
+  padding-top: 10px;
   padding-right: 20px;
 }
 div.code-toolbar > .toolbar a {
@@ -146,7 +147,8 @@ div.code-toolbar > .toolbar span:focus,
 div.code-toolbar > .toolbar span:hover {
   color: inherit;
   text-decoration: none;
-  background-color: var(--green);
+  opacity: 0.5;
+  /* background-color: var(--green); */
 }
 @media print {
   code[class*='language-'],

diff --git a/src/views/Post.vue b/src/views/Post.vue
@@ -215,6 +215,7 @@ import { usePostStore } from '@/stores/post'
 import {
   computed,
   defineComponent,
+  nextTick,
   onBeforeUnmount,
   onMounted,
   ref,
@@ -230,6 +231,8 @@ import '@/styles/prism-dracula.css'
 import { useMetaStore } from '@/stores/meta'
 import { useAppStore } from '@/stores/app'
 
+declare const Prism: any
+
 export default defineComponent({
   name: 'ObPost',
   components: { Sidebar, Toc, Comment, SubTitle, Article, Profile },
@@ -256,6 +259,18 @@ export default defineComponent({
         appStore.setHeaderImage(response.cover)
         loading.value = false
       })
+      if (appStore.hexoConfig.writing.highlight.enable) {
+        console.error(
+          '[Aurora Config Error]: Please turn off [Hightlightjs] and enable [Prismjs] instead. '
+        )
+      }
+      if (appStore.hexoConfig.writing.prismjs.preprocess) {
+        console.error(
+          "[Aurora Config Error]: Please set Hexo config's prismjs' [preprocess] property to false! "
+        )
+      }
+      await nextTick()
+      Prism.highlightAll()
     }
 
     watch(