markdown highlight

webapp/src/lib/components/MarkdownRenderer.svelte

@@ -7,6 +7,7 @@
 	import extensions from '$lib/marked/extensions';
 	import Link from '$lib/marked/renderers/Link.svelte';
 	import Tag from '$lib/marked/renderers/Tag.svelte';
+	import Highlight from '$lib/marked/renderers/Highlight.svelte';
 
 	export let plaintext: string;
 
@@ -28,7 +29,8 @@ prose-blockquote:first:before:content-['']"
 			list: List,
 			link: Link,
 			'internal-link': InternalLink,
-			tag: Tag
+			tag: Tag,
+			highlight: Highlight
 		}}
 		source={plaintext}
 		{options}

webapp/src/lib/marked/extensions.ts

@@ -26,7 +26,6 @@ const TagExtension = {
 	tokenizer(src: string) {
 		const match = src.match(/^#([\w/]+)[\W\s]/);
 		if (match) {
-			console.log(match);
 			return {
 				type: 'tag',
 				raw: match[0].trim(),
@@ -37,6 +36,25 @@ const TagExtension = {
 	}
 };
 
-export default [InternalLinkExtension, TagExtension];
+const HighlightExtension = {
+	name: 'highlight',
+	level: 'inline',
+	start(src: string) {
+		return src.match(/==/)?.index;
+	},
+	tokenizer(src: string) {
+		const match = src.match(/^==(.+)==/);
+		if (match) {
+			return {
+				type: 'highlight',
+				raw: match[0].trim(),
+				text: match[1].trim()
+			};
+		}
+		return false;
+	}
+};
+
+export default [InternalLinkExtension, TagExtension, HighlightExtension];
 
 // ^\#([\w\/]+)\W*

webapp/src/lib/marked/renderers/Highlight.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+	export let text: string;
+</script>
+
+<span class="bg-yellow-300">{text}</span>