feat(code-editor): add HTML and CSS syntax highlighting support

Author: hannahu

etc/lime-elements.api.md

@@ -2088,7 +2088,7 @@ export interface Label<T = LabelValue> {
 export type LabelValue = string | number | boolean | null | undefined;
 
 // @public (undocumented)
-export type Language = 'javascript' | 'jinja2' | 'json' | 'typescript';
+export type Language = 'css' | 'html' | 'javascript' | 'jinja2' | 'json' | 'typescript';
 
 // @public (undocumented)
 export type Languages = 'da' | 'de' | 'en' | 'fi' | 'fr' | 'nb' | 'no' | 'nl' | 'sv';

src/components/code-editor/code-editor.tsx

@@ -10,14 +10,18 @@ import {
 } from '@stencil/core';
 import { ColorScheme, Language } from './code-editor.types';
 import CodeMirror from 'codemirror';
+import 'codemirror/mode/css/css';
+import 'codemirror/mode/htmlmixed/htmlmixed';
 import 'codemirror/mode/javascript/javascript';
 import 'codemirror/mode/jinja2/jinja2';
 import 'codemirror/addon/selection/active-line';
 import 'codemirror/addon/edit/matchbrackets';
+import 'codemirror/addon/edit/matchtags';
 import 'codemirror/addon/lint/lint';
 import 'codemirror/addon/lint/json-lint';
 import 'codemirror/addon/fold/foldgutter';
 import 'codemirror/addon/fold/brace-fold';
+import 'codemirror/addon/fold/xml-fold';
 import jslint from 'jsonlint-mod';
 
 /**
@@ -208,6 +212,8 @@ export class CodeEditor {
                 name: 'application/typescript',
                 typescript: true,
             };
+        } else if (this.language === 'html') {
+            mode = 'htmlmixed';
         }
 
         if (this.fold) {
@@ -224,6 +230,7 @@ export class CodeEditor {
             lineNumbers: this.lineNumbers,
             styleActiveLine: true,
             matchBrackets: true,
+            matchTags: { bothTags: true },
             lint: this.lint,
             foldGutter: this.fold,
             gutters: gutters,

src/components/code-editor/code-editor.types.ts

@@ -1,7 +1,13 @@
 /**
  * @public
  */
-export type Language = 'javascript' | 'jinja2' | 'json' | 'typescript';
+export type Language =
+    | 'css'
+    | 'html'
+    | 'javascript'
+    | 'jinja2'
+    | 'json'
+    | 'typescript';
 
 /**
  * @public