Use Shiki for code highlighting

hongquan · Jun 3, 2024 · 02e664f · 02e664f
1 parent 156c243
commit 02e664f
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 14 deletions.
diff --git a/.browserslistrc b/.browserslistrc
diff --git a/api/_public/main.js b/api/_public/main.js
@@ -1,7 +1,14 @@
 import ky from 'https://unpkg.com/ky'
 import Alpine from 'https://esm.sh/alpinejs@3.14.0'
-import 'https://unpkg.com/@highlightjs/cdn-assets@11.2.0/highlight.min.js'
-import 'https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.2.0/build/languages/shell.min.js'
+import { getHighlighter } from 'https://esm.sh/shiki'
+
+
+const highlighter = await getHighlighter({
+  themes: ['andromeeda'],
+  langs: ['shellsession', 'shell'],
+})
+
+console.log('highlighter', highlighter)
 
 
 document.addEventListener('alpine:init', () => {
@@ -15,7 +22,8 @@ document.addEventListener('alpine:init', () => {
       this.errors = errors
     },
     colorizeHttpie() {
-      return hljs.highlight(this.httpie, { language: 'shell' }).value
+      if (!this.httpie) return ''
+      return highlighter.codeToHtml(this.httpie, { lang: 'shellsession', theme: 'andromeeda' })
     }
   }))
 })

diff --git a/api/_public/uno.css b/api/_public/uno.css
@@ -38,13 +38,12 @@
 .flex-col{flex-direction:column;}
 .cursor-pointer{cursor:pointer;}
 .select-none{-webkit-user-select:none;user-select:none;}
+.resize-y{resize:vertical;}
 .items-center{align-items:center;}
 .justify-between{justify-content:space-between;}
 .gap-1{gap:0.25rem;}
 .space-y-4>:not([hidden])~:not([hidden]){--un-space-y-reverse:0;margin-top:calc(1rem * calc(1 - var(--un-space-y-reverse)));margin-bottom:calc(1rem * var(--un-space-y-reverse));}
 .overflow-hidden{overflow:hidden;}
-.dark .dark\:focus\:border-0:focus{border-width:0px;}
-.focus\:border-0:focus{border-width:0px;}
 .rounded-t{border-top-left-radius:0.25rem;border-top-right-radius:0.25rem;}
 .bg-gray-900{--un-bg-opacity:1;background-color:rgb(17 24 39 / var(--un-bg-opacity));}
 .from-gray-700{--un-gradient-from-position:0%;--un-gradient-from:rgb(55 65 81 / var(--un-from-opacity, 1)) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(55 65 81 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);}
@@ -63,9 +62,10 @@
 .font-bold{font-weight:700;}
 .font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;}
 .shadow-lg{--un-shadow:var(--un-shadow-inset) 0 10px 15px -3px var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 4px 6px -4px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}
-.dark .dark\:focus\:ring-0:focus{--un-ring-width:0px;--un-ring-offset-shadow:var(--un-ring-inset) 0 0 0 var(--un-ring-offset-width) var(--un-ring-offset-color);--un-ring-shadow:var(--un-ring-inset) 0 0 0 calc(var(--un-ring-width) + var(--un-ring-offset-width)) var(--un-ring-color);box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}
-.focus\:ring-0:focus{--un-ring-width:0px;--un-ring-offset-shadow:var(--un-ring-inset) 0 0 0 var(--un-ring-offset-width) var(--un-ring-offset-color);--un-ring-shadow:var(--un-ring-inset) 0 0 0 calc(var(--un-ring-width) + var(--un-ring-offset-width)) var(--un-ring-color);box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}
 @media (min-width: 640px){
+.sm\:flex-row{flex-direction:row;}
+.sm\:resize-none{resize:none;}
+.sm\:items-center{align-items:center;}
 .sm\:space-x-4>:not([hidden])~:not([hidden]){--un-space-x-reverse:0;margin-left:calc(1rem * calc(1 - var(--un-space-x-reverse)));margin-right:calc(1rem * var(--un-space-x-reverse));}
 .sm\:space-y-0>:not([hidden])~:not([hidden]){--un-space-y-reverse:0;margin-top:calc(0px * calc(1 - var(--un-space-y-reverse)));margin-bottom:calc(0px * var(--un-space-y-reverse));}
 }

diff --git a/api/templates/index.jinja b/api/templates/index.jinja
@@ -9,9 +9,8 @@
     <meta property='og:title' content='Online tool to convert cURL command to HTTPie'>
     <meta property='og:image' content='https://www.nicepng.com/png/full/6-60631_pie-png.png'>
     <link rel='icon' href="{{ url_for('static', path='favicon.png') }}">
-    <link rel='stylesheet' href='https://matcha.mizu.sh/matcha.css'>
+    <link rel='stylesheet' href='https://matcha.mizu.sh/matcha.lite.css'>
     <link rel='stylesheet' href="{{ url_for('static', path='uno.css?v=1') }}">
-    <link rel='stylesheet' href='https://unpkg.com/@highlightjs/cdn-assets@11.0.1/styles/a11y-dark.min.css'>
     <title>CurliPie</title>
   </head>
   <body>
@@ -25,11 +24,11 @@
       </div>
     </header>
     <main x-data='app'>
-      <form method='POST' x-on:submit.prevent='onSubmit' class='flex flex-col md:flex-row items-center space-y-4 sm:space-y-0 sm:space-x-4'>
+      <form method='POST' x-on:submit.prevent='onSubmit' class='flex flex-col sm:flex-row sm:items-center space-y-4 sm:space-y-0 sm:space-x-4'>
         <div class='grow'>
-          <textarea name='curl' class='font-mono' x-model='curl'></textarea>
+          <textarea name='curl' class='font-mono resize-y sm:resize-none' x-model='curl'></textarea>
         </div>
-        <div class='min-w-20'>
+        <div class='min-w-20 text-center'>
           <button>Convert</button>
         </div>
       </form>