[website] implement playground

Author: xiaoxinghu

README.org

@@ -1,6 +1,5 @@
 #+title: Orga
 #+subtitle: org-mode < JavaScript
-#+layout: './website/src/components/landing'
 
 * What Is It
 

packages/editor/lib/theme.js

@@ -3,7 +3,16 @@ import { HighlightStyle, syntaxHighlighting } from '@codemirror/language'
 import { tags as t } from '@orgajs/cm-lang'
 
 const theme = EditorView.baseTheme({
-  '&': {},
+  '&': {
+    height: '100%',
+  },
+  '&:focus': {
+    outline: 'none',
+  },
+  '&.cm-editor.cm-focused': {
+    outline: 'none',
+  },
+  '.cm-scroller': { fontFamily: 'inherit' },
   '.hide': { display: 'none' },
   '.cm-link': {
     cursor: 'pointer',
@@ -37,7 +46,12 @@ const baseStyle = HighlightStyle.define([
   { tag: t.keyword, fontWeight: 'bold' },
   { tag: t.strong, fontWeight: 'bold' },
   { tag: t.emphasis, fontStyle: 'italic' },
-  // { tag: t.monospace, color: 'blue' }, // TODO: change font?
+  {
+    tag: t.monospace,
+    borderRadius: '4px',
+    padding: '1px 4px',
+    fontFamily: "'JetBrains Mono', monospace",
+  },
   { tag: t.strikethrough, textDecoration: 'line-through' },
   { tag: t.underline, textDecoration: 'underline' },
 ])
@@ -46,7 +60,6 @@ const lightColors = HighlightStyle.define(
   [
     { tag: t.keyword, color: '#e45649' },
     { tag: t.comment, color: '#9ca0a4' },
-    { tag: t.monospace, color: 'blue' },
     { tag: t.link, color: 'blue' },
     { tag: t.processingInstruction, color: '#9ca0a4' },
     { tag: t.attributeName, color: '#9ca0a4' },
@@ -58,7 +71,6 @@ const darkColors = HighlightStyle.define(
   [
     { tag: t.keyword, color: 'green' },
     { tag: t.comment, color: 'red' },
-    { tag: t.monospace, backgroundColor: 'blue' },
     { tag: t.link, color: '#5cc9f5' },
     { tag: t.processingInstruction, color: 'gray' },
     { tag: t.attributeName, color: 'gray' },