diff --git a/crates/web-host/src/client/root.html b/crates/web-host/src/client/root.html index 9d8b8a77..b2ab447d 100644 --- a/crates/web-host/src/client/root.html +++ b/crates/web-host/src/client/root.html @@ -44,6 +44,7 @@ console.log("Failed to retrieve welcome text!"); } } + // Output a system message to the narrative panel. function output_system_text(text) { let narrative = document.getElementById("narrative"); @@ -122,7 +123,7 @@ context.token = paseto_token; context.ws = ws; ws.onmessage = handle_narrative_event - + // Show the narrative panel, and hide the welcome panel. let welcome_panel = document.getElementById("welcome"); welcome_panel.style.display = "none"; @@ -141,7 +142,19 @@ // Attach event handlers to our elements in the DOM. document.addEventListener("DOMContentLoaded", function () { - context.showdown = new showdown.Converter({emoji: true, simpleLineBreaks: true}); + context.showdown = new showdown.Converter({ + // Permit markdown tables, strikethrough, and emoji. + tables: true, + strikethrough: true, + emoji: true, + // Require a space after the # in a heading, to prevent non-heading-intended things from being + // interpreted as such. + requireSpaceBeforeHeadingText: true, + // Open links in new window to prevent this one from being clobbered + openLinksInNewWindow: true, + // Put a
after each line break, as this makes existing MOO content format correctly. + simpleLineBreaks: true + }); let connect_form = document.getElementById("connect_form"); let entry_form = document.getElementById("entry"); @@ -168,15 +181,18 @@ color: black; background-color: white; } + .system_message { color: darkred; background-color: white; } + .gap { color: white; background-color: white; height: 10px; } + #narrative { padding: 5px; font-family: monospace; @@ -190,18 +206,24 @@ height: calc(100vh - 100px); margin-bottom: 10px; } - #narrative p { margin:0 } + + #narrative p { + margin: 0 + } #welcome { padding: 10px; - font-family: arial,sans-serif; + font-family: arial, sans-serif; border-radius: 5px; border-width: thick; border-style: solid; border-color: black; background-color: white; } - #welcome p { margin:0 } + + #welcome p { + margin: 0 + } #anchor { overflow-anchor: auto;