feat: add highlighting for code blocks (#244)

* feat: add highlighting for code blocks

* update package lock

docs/usage.md

@@ -22,7 +22,6 @@ Enter your roles in the editor via `ini` format:
 ### Example config
 
 ```ini
-
 # A comment
 
 [role-title]
@@ -44,7 +43,6 @@ It's possible to use `source_profile` in roles to point to a parent profile. Usi
 * `aws_account_id`: Setting this field to the root account alias or id will result in not showing roles that are not associated with `source_profile` in popup on current tab's aws-console.
 
 ```ini
-
 [parent]
 aws_account_id = my-org
 target_role_name = MyRole
@@ -70,7 +68,6 @@ Example (see config above):
 It is also possible to use this feature recursivly:
 
 ```ini
-
 [parent]
 aws_account_id = my-org
 

package.json

@@ -30,9 +30,11 @@
     "@tanstack/react-virtual": "^3.0.0-beta.26",
     "@uiw/react-codemirror": "^4.15.1",
     "buffer": "^6.0.3",
-    "colortranslator": "^3.0.0",
+    "colortranslator": "^2.0.0",
+    "highlight.js": "^11.8.0",
     "js-ini": "^1.5.1",
-    "marked": "^7.0.0",
+    "marked": "^5.0.0",
+    "marked-highlight": "^2.0.1",
     "normalize.css": "^8.0.1",
     "outmatch": "^0.7.0",
     "pako": "^2.0.4",

src/options/hooks.ts

@@ -5,16 +5,26 @@ import {
   SetStateAction
 } from 'react';
 import { marked } from 'marked';
+import { markedHighlight } from 'marked-highlight';
+import hljs from 'highlight.js';
 
 import readme from '../../docs/usage.md';
 import { getConfig } from '../common/config';
 
+marked.use(markedHighlight({
+  langPrefix: 'hljs language-',
+  highlight(code, lang) {
+    const language = hljs.getLanguage(lang) ? lang : 'plaintext';
+    return hljs.highlight(code, { language }).value;
+  }
+}));
+
 export const useDocs = () => {
   const [docs, setDocs] = useState('');
   useEffect(() => {
     fetch(readme)
       .then(res => res.text())
-      .then(txt => marked(txt))
+      .then(txt => marked.parse(txt))
       .then(setDocs);
   }, []);
   return docs;

src/options/options.scss

@@ -1,5 +1,6 @@
 @import "../scss/base";
 @import "../scss/scrollbar-chrome";
+@import "highlight.js/styles/github-dark.css";
 
 #options-ui {
   max-width: 1400px;
@@ -99,12 +100,11 @@
         }
       }
 
-      pre {
-        padding: 10px;
-        background: $light-gray2;
-        @media (prefers-color-scheme: dark) {
-          background: $dark-gray2;
-        }
+
+      code.hljs {
+        background: $dark-gray2;
+        // margin: 0;
+        padding: 7px;
       }
     }
   }

src/options/options.tsx

@@ -10,9 +10,9 @@ import {
   Card,
   FocusStyleManager,
   Navbar,
+  OverlayToaster,
   Position,
   ProgressBar,
-  Toaster,
 } from '@blueprintjs/core';
 
 import { setConfig } from '../common/config';
@@ -30,7 +30,7 @@ import Editor from './editor/Editor';
 
 FocusStyleManager.onlyShowFocusOnTabs();
 
-const Notification = Toaster.create({
+const Notification = OverlayToaster.create({
   position: Position.TOP,
   maxToasts: 4,
 });
@@ -48,14 +48,12 @@ const App = () => {
   const theme = useColorScheme();
   const getStorage = () => getStorageSize().then(setSize);
 
-  console.log(size);
-
   useEffect(() => {
     getStorage();
   }, []);
 
   const onSave = () => {
-    setConfig(configFile || '')
+    setConfig(configFile ?? '')
       .then(() => Notification.show({
         icon: 'saved',
         message: 'Config saved',