Fixing formatting of code block and adding language

packages/@zblog/toolchain/src/markdown-parser.ts

@@ -605,6 +605,10 @@ class MultiLineCode extends Symbol {
 	 * @type {string}
 	 */
 	text: string = "";
+	/**
+	 * @type {string}
+	 */
+	language: string = "";
 	/**
 	 *
 	 * @param {string} line
@@ -622,7 +626,7 @@ class MultiLineCode extends Symbol {
 	 */
 	static create(lineFeed: LineFeed): Symbol {
 		const instance = new MultiLineCode();
-		const line = lineFeed.claim().trim();
+		const line = lineFeed.claim();
 		const lineWithoutStartTag = line.slice(3, line.length);
 
 		const sameLineContainsEnding = lineWithoutStartTag.includes("```");
@@ -640,7 +644,8 @@ class MultiLineCode extends Symbol {
 			instance.text = text;
 			return instance;
 		}
-		const lines = [lineWithoutStartTag];
+		instance.language = lineWithoutStartTag
+		const lines = [];
 
 		const endTokenFound = false;
 		while (!endTokenFound && !lineFeed.isEmpty()) {
@@ -665,15 +670,18 @@ class MultiLineCode extends Symbol {
 
 	/**
 	 *
-	 * @param {string} assetDirectory
+	 * @param {string} _assetDirectory
 	 * @returns {void}
 	 */
-	process(assetDirectory: string): void {
+	// NOTE: Needed to adhere to interface
+	// eslint-disable-next-line @typescript-eslint/no-unused-vars
+	process(_assetDirectory: string): void {
 		return;
 	}
 
 	render() {
-		return `<pre><code>${this.text}</code></pre>`;
+		const codeLanguage = this.language.length > 0 ? `<pre class="code-language">${this.language}</pre>` : "";
+		return `${codeLanguage}<pre><code style="white-space: pre;">${this.text}</code></pre>`;
 	}
 }
 

src/templates/note.html

@@ -35,8 +35,18 @@
       width: fit-content;
       max-width: 100%;
       white-space: normal;
+			margin-top: 0;
     }
 
+		pre.code-language {
+			padding: 0.1rem 1rem 0 1rem;
+			margin: 0;
+			border-bottom: none;
+			color: #00FFFF;
+			font-weight:bold;
+			text-transform: capitalize;
+		}
+
     img {
       max-width: 100%;
       border-radius: 4px;