perf: refine code block styles

halo-sigs · Nov 24, 2022 · ec71ec3 · ec71ec3
1 parent 23c0ad3
commit ec71ec3
Show file tree

Hide file tree

Showing 3 changed files with 1 addition and 60 deletions.
diff --git a/example/src/App.vue b/example/src/App.vue
@@ -47,7 +47,6 @@ import {
   CommandCodeBlock,
   ExtensionCodeBlock,
   lowlight,
-  ExtensionKatexBlock,
   RichTextEditor,
   useEditor,
   UndoMenuItem,
@@ -140,7 +139,6 @@ const editor = useEditor({
     ExtensionCodeBlock.configure({
       lowlight,
     }),
-    ExtensionKatexBlock,
   ],
   onUpdate: () => {
     content.value = editor.value?.getHTML() + "";

diff --git a/packages/editor/src/index.ts b/packages/editor/src/index.ts
@@ -3,7 +3,7 @@ import RichTextEditor from "./components/Editor.vue";
 import "./styles/index.scss";
 import "./styles/tailwind.css";
 import "floating-vue/dist/style.css";
-// import "katex/dist/katex.css";
+import "highlight.js/styles/github-dark.css";
 
 const plugin: Plugin = {
   install(app: App) {

diff --git a/packages/editor/src/styles/index.scss b/packages/editor/src/styles/index.scss
@@ -27,71 +27,14 @@
       padding: 15px;
 
       pre {
-        background: #0d0d0d;
-        color: #fff;
-        font-family: "JetBrainsMono", monospace;
         padding: 0.75rem 1rem;
-        border-radius: 0;
         margin: 0;
 
         code {
           color: inherit;
-          padding: 0;
           background: none;
           font-size: 0.8rem;
         }
-
-        .hljs-comment,
-        .hljs-quote {
-          color: #616161;
-        }
-
-        .hljs-variable,
-        .hljs-template-variable,
-        .hljs-attribute,
-        .hljs-tag,
-        .hljs-name,
-        .hljs-regexp,
-        .hljs-link,
-        .hljs-name,
-        .hljs-selector-id,
-        .hljs-selector-class {
-          color: #f98181;
-        }
-
-        .hljs-number,
-        .hljs-meta,
-        .hljs-built_in,
-        .hljs-builtin-name,
-        .hljs-literal,
-        .hljs-type,
-        .hljs-params {
-          color: #fbbc88;
-        }
-
-        .hljs-string,
-        .hljs-symbol,
-        .hljs-bullet {
-          color: #b9f18d;
-        }
-
-        .hljs-title,
-        .hljs-section {
-          color: #faf594;
-        }
-
-        .hljs-keyword,
-        .hljs-selector-tag {
-          color: #70cff8;
-        }
-
-        .hljs-emphasis {
-          font-style: italic;
-        }
-
-        .hljs-strong {
-          font-weight: 700;
-        }
       }
 
       ul[data-type="taskList"] {