Improve codeflask HTML syntax highlighting colours.

knadh · Sep 19, 2021 · 956e990 · 956e990
1 parent 4b13f0c
commit 956e990
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 1 deletion.
diff --git a/frontend/src/components/Editor.vue b/frontend/src/components/Editor.vue
@@ -79,6 +79,7 @@ import 'quill/dist/quill.core.css';
 import { quillEditor, Quill } from 'vue-quill-editor';
 import CodeFlask from 'codeflask';
 import TurndownService from 'turndown';
+import { colors } from '../constants';
 
 import CampaignPreview from './CampaignPreview.vue';
 import Media from '../views/Media.vue';
@@ -242,6 +243,9 @@ export default {
         <style>
           .codeflask .codeflask__flatten { font-size: 15px; }
           .codeflask .codeflask__lines { background: #fafafa; z-index: 10; }
+          .codeflask .token.tag { font-weight: bold; }
+          .codeflask .token.attr-name { color: #111; }
+          .codeflask .token.attr-value { color: ${colors.primary} !important; }
         </style>
         <div id="area"></area>
       `;

diff --git a/static/public/static/style.css b/static/public/static/style.css
@@ -48,7 +48,7 @@ input[type="text"], input[type="email"], select {
 
 .button {
   background: #0055d4;
-  padding: 10px 30px;
+  padding: 15px 30px;
   border-radius: 3px;
   border: 0;
   cursor: pointer;