ui: change highlight style

packages/ui-default/components/highlighter/highlighter.page.styl

@@ -1,10 +1,4 @@
-/*
-
-VS theme by Andrew Lock
-
-https://github.com/PrismJS/prism-themes/blob/master/themes/prism-vs.css
-
-*/
+@import 'prismjs/themes/prism.css'
 
 pre, code
   background: $syntax-hl-bg-color
@@ -33,63 +27,22 @@ pre > code
 [data-syntax-hl-show-line-number] pre.line-numbers > code
   white-space: pre
 
-.syntax-hl
-  .token
-    &.comment, &.prolog, &.doctype, &.cdata
-      color: #008000
-      font-style: italic
-    &.namespace
-      opacity: 0.7
-    &.string
-      color: #a31515
-    &.punctuation, &.operator
-      color: #393A34
-    &.url, &.symbol, &.number, &.boolean, &.inserted
-      color: #36acaa
-    &.atrule, &.keyword, &.attr-value, .language-autohotkey&.selector, .language-json&.boolean, .language-json&.number
-      color: #0000ff
-    &.function
-      color: #393A34
-    &.deleted, .language-autohotkey&.tag
-      color: #9a050f
-    &.selector, .language-autohotkey&.keyword
-      color: #00009f
-    &.important, &.bold
-      font-weight: bold
-    &.italic
-      font-style: italic
-    &.class-name, .language-json&.property
-      color: #2B91AF
-    &.tag, &.selector
-      color: #800000
-    &.attr-name, &.property, &.regex, &.entity
-      color: #ff0000
-    &.directive.tag .tag
-      background: #ffff00
-      color: #393A34
-    &.macro
-      &, .token
-        color: #2b91af
-    &.builtin
-      color: #077
+.toolbar
+  position: absolute
+  white-space: no-wrap
+  right: 0 !important
+  top: 0 !important
+  padding: rem(5px)
+  opacity: 1 !important
+  background: rgba($syntax-hl-bg-color, 0.8)
+  font-family: $primary-font-family
+  pointer-events: all
+  user-select: none
 
-  .toolbar
-    position: absolute
-    white-space: no-wrap
-    right: 0
-    top: 0
-    padding: rem(5px)
-    background: rgba($syntax-hl-bg-color, 0.8)
-    font-family: $primary-font-family
-    font-size: rem($font-size-small)
-    opacity: 0
-    pointer-events: none
-    transition: opacity .1s linear
-    user-select: none
-
-  &:hover .toolbar
-    opacity: 1
-    pointer-events: all
+.toolbar-item
+  a
+    font-size: large !important
+    border-radius: 0px !important
 
 [data-syntax-hl-show-line-number]
   pre

packages/ui-default/components/highlighter/prismjs.js

@@ -108,6 +108,7 @@ const prismjsApiWrap = {
       if (format && astyle && astyle[1]) {
         const [success, result] = format($code.text(), `${UserContext.astyleOptions.trim()} mode=${astyle[1]}`);
         console.log(success.result);
+        code.original = $code.text();
         if (!success) Notification.error('Code format fail');
         else $code.text(result.replace(/^#(include|import)[\t ]*(<|")/gm, (match, p1, p2) => `#${p1} ${p2}`));
       }

packages/ui-default/setting.yaml

@@ -83,10 +83,12 @@ lang_monaco_modes:
     jl: julia
 showInvisibleChar:
   type: boolean
+  family: highlight
   desc: show invisible characters when formatting code
   category: preference
 astyleOptions:
   type: text
+  family: highlight
   desc: astyle formatting options
   category: preference
   value: >