pref: copy to clipboard

src/styles/html/richText.scss

@@ -1,71 +0,0 @@
-/**
- * 这是渲染 wangEditor 输出的富文本的样式
- * 需要注意的是，.kungalgame-topic-content 这个类名被全局注册了
- */
-.kungalgame-topic-content {
-  border-radius: 5px;
-  padding: 0 10px;
-  margin-top: 20px;
-  overflow-x: auto;
-  * {
-    max-width: 100%;
-    overflow-y: scroll;
-  }
-
-  a {
-    color: var(--kungalgame-blue-5);
-    border-bottom: 1.5px solid var(--kungalgame-trans-white-9);
-    &:hover {
-      border-bottom: 1.5px solid var(--kungalgame-blue-5);
-    }
-  }
-
-  span {
-    text-shadow: none;
-  }
-}
-
-.kungalgame-topic-content p,
-.kungalgame-topic-content li {
-  white-space: pre-wrap; /* 保留空格 */
-}
-
-.kungalgame-topic-content blockquote {
-  border-left: 8px solid var(--kungalgame-blue-1);
-  padding: 10px 10px;
-  margin: 10px 0;
-  background-color: var(--kungalgame-trans-blue-0);
-}
-
-.kungalgame-topic-content code {
-  font-family: monospace;
-  background-color: var(--kungalgame-trans-blue-0);
-  padding: 3px;
-  border-radius: 3px;
-}
-.kungalgame-topic-content pre > code {
-  display: block;
-  padding: 10px;
-}
-
-.kungalgame-topic-content table {
-  border-collapse: collapse;
-}
-.kungalgame-topic-content td,
-.kungalgame-topic-content th {
-  border: 1px solid var(--kungalgame-blue-4);
-  min-width: 50px;
-  height: 20px;
-}
-.kungalgame-topic-content th {
-  background-color: var(--kungalgame-trans-blue-0);
-}
-
-.kungalgame-topic-content ul,
-.kungalgame-topic-content ol {
-  padding-left: 20px;
-}
-
-.kungalgame-topic-content input[type='checkbox'] {
-  margin-right: 5px;
-}

src/views/topic/content/components/Content.vue

@@ -24,8 +24,6 @@ onMounted(() => {
 </template>
 
 <style lang="scss" scoped>
-@import '@/styles/html/richText.scss';
-
 /* 内容区右侧的话题展示区 */
 .kungalgame-topic-content {
   /** 100 + 20 + 20 + 1 = 141px */
@@ -41,6 +39,8 @@ onMounted(() => {
   padding: 0 10px;
   margin-top: 20px;
   overflow-x: auto;
+
+  /* 下面的代码调整富文本区域的格式 */
   :deep(*) {
     max-width: 100%;
     overflow-y: scroll;
@@ -123,35 +123,48 @@ onMounted(() => {
   }
 
   :deep(.toolbar) {
-    top: 10px;
+    top: 17px;
     right: 10px;
     display: flex;
     & > .toolbar-item {
       /* 这里直接根据 DOM 结构写的，写的不是很明了，要怪就怪写 prism 插件的人吧 hhh */
       button,
       & > span {
-        background-color: var(--kungalgame-trans-white-9);
+        transition: all 0.2s;
-        border: 1px solid var(--kungalgame-blue-4);
-        color: var(--kungalgame-blue-4);
         box-shadow: unset;
         margin-left: 10px;
         border-radius: 0;
         padding: 2px 5px;
+      }
+      & > span {
+        color: var(--kungalgame-pink-4);
+        border: 1px solid var(--kungalgame-pink-4);
+        background-color: var(--kungalgame-trans-white-5);
         &:hover {
-          background-color: var(--kungalgame-blue-4);
+          background-color: var(--kungalgame-pink-4);
           color: var(--kungalgame-white);
         }
       }
       button {
         cursor: pointer;
+        background-color: var(--kungalgame-trans-white-9);
+        border: 1px solid var(--kungalgame-blue-4);
+        color: var(--kungalgame-blue-4);
+        &:hover {
+          background-color: var(--kungalgame-blue-4);
+          color: var(--kungalgame-white);
+        }
         &:focus {
-          color: var(--kungalgame-red-4);
+          color: var(--kungalgame-pink-4);
+          border: 1px solid var(--kungalgame-pink-4);
+          background-color: var(--kungalgame-trans-white-5);
         }
       }
     }
   }
 }
 
+/* 适配手机端 */
 @media (max-width: 700px) {
   .kungalgame-topic-content {
     width: 100%;

vite.config.ts

@@ -15,28 +15,28 @@ export default defineConfig({
     visualizer() as PluginOption,
     vueJsx(),
     prismjsPlugin({
+      // 这里和 wangEditor 适配
       languages: [
-        'javascript',
+        'jsx',
-        'css',
+        'typescript',
         'markup',
         'go',
-        'java',
-        'python',
-        'nginx',
-        'yaml',
-        'bash',
-        'sql',
-        'git',
-        'markdown',
         'php',
-        'vim',
+        'c',
-      ],
+        'python',
-      plugins: [
+        'java',
-        'line-numbers',
+        'cpp',
-        'show-language',
+        'csharp',
-        'toolbar',
+        'visual-basic',
-        'copy-to-clipboard',
+        'sql',
+        'ruby',
+        'swift',
+        'bash',
+        'markdown',
+        'lua',
+        'groovy',
       ],
+      plugins: ['show-language', 'toolbar', 'copy-to-clipboard'],
       theme: 'okaidia',
       css: true,
     }),