mdparse: add toggle for viewing source chars

client/components/ParsedMessage.vue

@@ -59,7 +59,7 @@ export default defineComponent({
 			};
 
 			const toParse = "".concat(...generateStandIns(parsed));
-			return rehydrate(parseMd(toParse), htmls);
+			return rehydrate(parseMd(toParse, this.store.state.settings.renderMdSrc), htmls);
 		}
 
 		return parsed;

client/components/Settings/Appearance.vue

@@ -17,22 +17,37 @@
 				Include seconds in timestamp
 			</label>
 		</div>
+		<div>
+			<label class="opt">
+				<input
+					:checked="store.state.settings.use12hClock"
+					type="checkbox"
+					name="use12hClock"
+				/>
+				Use 12-hour timestamps
+			</label>
+		</div>
+
+		<h3>Markdown</h3>
 		<div>
 			<label class="opt">
 				<input :checked="store.state.settings.parseMd" type="checkbox" name="parseMd" />
-				Render inline markdown in messages
+				Render inline Markdown in messages
 			</label>
 		</div>
+
 		<div>
 			<label class="opt">
 				<input
-					:checked="store.state.settings.use12hClock"
+					:checked="store.state.settings.renderMdSrc"
 					type="checkbox"
-					name="use12hClock"
+					name="renderMdSrc"
 				/>
-				Use 12-hour timestamps
+				Show source characters in rendered Markdown (i.e. <code>`code`</code> instead of
+				<code>code</code>)
 			</label>
 		</div>
+
 		<template v-if="store.state.serverConfiguration?.prefetch">
 			<h2>Link previews</h2>
 			<div>

client/js/helpers/mdHelpers.ts

@@ -28,7 +28,7 @@ export type ParseFragment =
 			| undefined
 	  )[];
 
-export const parseMd = (src: string) => {
+export const parseMd = (src: string, renderMdSrc) => {
 	let i = 0;
 	const result: string[] = [];
 
@@ -44,10 +44,14 @@ export const parseMd = (src: string) => {
 				"`": "monospace",
 			}[c];
 
+			const srcBlock = renderMdSrc ? (double ? c + c : c) : "";
+			const spanContents = `${srcBlock}${parseMd(
+				src.slice(i + n, end),
+				renderMdSrc
+			)}${srcBlock}`;
+
 			if (end !== -1) {
-				result.push(
-					`<span class='irc-${className}'>${parseMd(src.slice(i + n, end))}</span>`
-				);
+				result.push(`<span class='irc-${className}'>${spanContents}</span>`);
 				i = end + n;
 			}
 		}

client/js/settings.ts

@@ -80,6 +80,9 @@ const defaultConfig = {
 	parseMd: {
 		default: false,
 	},
+	renderMdSrc: {
+		default: false,
+	},
 	use12hClock: {
 		default: false,
 	},