Enhance Support for GitHub Markdown Elements (*WIP)

default-md-files/morty-docs.md

@@ -24,7 +24,7 @@ lorem ipsum [this is a normal link](https://github.com/bbc) lorem ipsum<br>
 ## Images
 Do images still work?
 
-![Image 1](./folder/subFolder/test.jpg)
+![Image 1](./images/test.jpg)
 
 ## Github Alerts
 
@@ -44,4 +44,37 @@ Do images still work?
 > Critical content demanding immediate user attention due to potential risks.
 
 > [!CAUTION]
-> Negative potential consequences of an action.
+> Negative potential consequences of an action.
+
+## Code blocks
+
+```yaml
+#Some yaml
+```
+
+## Diff code blocks
+
+```diff
+jobs:
+  build:
+    # these labels target the ephemeral runners created by this solution
+    runs-on:
+      - self-hosted 
+      - AWS
+      - ${{ github.run_id }}_${{ github.run_attempt }}
+    container:
+      image: 010438485535.dkr.ecr.eu-west-1.amazonaws.com/mobile-ci-android:jdk-17_abt-35
+-     volumes: nada
++     volumes:
++       - /bbc-certs:/bbc-certs     
+```
+
+## Tables
+
+_With the Correct Format (https://www.w3schools.io/file/markdown-table/), They will render_
+
+| Pet Type | Are Like | 
+| --- | --- | 
+| ![cat](./images/cat.png) | **Cats are:** keen on food. |  
+| ![dog](./images/dog.png) | **Dogs are:** excitable. | 
+| ![dino](./images/dino.png) | **Dinos are Firey:** watch out for those flames. | 

src/alert-icons.js

@@ -0,0 +1,70 @@
+// Github alert icons SVG code
+const alertIcons = {
+  note: `
+<svg class="octicon octicon-info mr-2" fill="currentColor" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true">
+  <path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 
+           6.5 6.5 0 0 0 0-13ZM6.5 7.75A.75.75 0 0 1 7.25 7h1a.75.75 0 0 1 
+           .75.75v2.75h.25a.75.75 0 0 1 0 1.5h-2a.75.75 0 0 1 
+           0-1.5h.25v-2h-.25a.75.75 0 0 1-.75-.75ZM8 
+           6a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"></path>
+</svg>`,
+
+  tip: `
+<svg class="octicon octicon-light-bulb mr-2" fill="currentColor" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true">
+  <path d="M8 1.5c-2.363 0-4 1.69-4 3.75 0 .984.424 1.625.984 
+           2.304l.214.253c.223.264.47.556.673.848.284.411.537.896.621 
+           1.49a.75.75 0 0 1-1.484.211c-.04-.282-.163-.547-.37-.847a8.456 
+           8.456 0 0 0-.542-.68c-.084-.1-.173-.205-.268-.32C3.201 
+           7.75 2.5 6.766 2.5 5.25 2.5 2.31 4.863 0 8 
+           0s5.5 2.31 5.5 5.25c0 1.516-.701 2.5-1.328 
+           3.259-.095.115-.184.22-.268.319-.207.245-.383.453-.541.681-.208.3-.33.565-.37.847a.751.751 
+           0 0 1-1.485-.212c.084-.593.337-1.078.621-1.489.203-.292.45-.584.673-.848.075-.088.147-.173.213-.253.561-.679.985-1.32.985-2.304 
+           0-2.06-1.637-3.75-4-3.75ZM5.75 
+           12h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1 0-1.5ZM6 
+           15.25a.75.75 0 0 1 .75-.75h2.5a.75.75 0 0 1 
+           0 1.5h-2.5a.75.75 0 0 1-.75-.75Z"></path>
+</svg>`,
+
+  important: `
+<svg class="octicon octicon-comment mr-2" fill="currentColor" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true">
+  <path d="M0 1.75C0 .784.784 0 1.75 0h12.5C15.216 0 16 .784 
+           16 1.75v9.5A1.75 1.75 0 0 1 14.25 13H8.06l-2.573 
+           2.573A1.458 1.458 0 0 1 3 14.543V13H1.75A1.75 1.75 0 0 
+           1 0 11.25Zm1.75-.25a.25.25 0 0 0-.25.25v9.5c0 
+           .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 
+           0 0 1 .53-.22h6.5a.25.25 0 0 0 
+           .25-.25v-9.5a.25.25 0 0 0-.25-.25Zm7 
+           2.25v2.5a.75.75 0 0 1-1.5 
+           0v-2.5a.75.75 0 0 1 1.5 
+           0ZM9 9a1 1 0 1 1-2 0 1 1 0 0 1 
+           2 0Z"></path>
+</svg>`,
+
+  warning: `
+<svg class="octicon octicon-alert mr-2" fill="currentColor" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true">
+  <path d="M6.457 1.047c.659-1.234 2.427-1.234 
+           3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 
+           15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 
+           0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 
+           0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 
+           0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 
+           0 1 1 0 0 1 2 0Z"></path>
+</svg>`,
+
+  caution: `
+<svg class="octicon octicon-stop mr-2" fill="currentColor" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true">
+  <path d="M4.47.22A.749.749 0 0 1 5 
+           0h6c.199 0 .389.079.53.22l4.25 4.25c.141.14.22.331.22.53v6a.749.749 
+           0 0 1-.22.53l-4.25 4.25A.749.749 0 0 1 11 
+           16H5a.749.749 0 0 1-.53-.22L.22 
+           11.53A.749.749 0 0 1 0 11V5c0-.199.079-.389.22-.53Zm.84 
+           1.28L1.5 5.31v5.38l3.81 3.81h5.38l3.81-3.81V5.31L10.69 
+           1.5ZM8 4a.75.75 0 0 1 .75.75v3.5a.75.75 
+           0 0 1-1.5 0v-3.5A.75.75 0 0 1 8 
+           4Zm0 8a1 1 0 1 1 0-2 1 1 0 0 1 
+           0 2Z"></path>
+</svg>`
+};
+
+// Export using CommonJS syntax
+module.exports = alertIcons;

src/markdown-to-html-parser.js

@@ -1,4 +1,5 @@
 const showdown = require('showdown')
+const alertIcons = require('./alert-icons.js')
 
 // there may be an option to enable this, but since we haven't found it here is a reg-ex
 // to convert links within a file from *.md to *.html
@@ -19,9 +20,31 @@ const convertMdHashLinksToHtmlLinks = {
 
 const headingExtension = {
   type: 'output',
-  regex: /<(h[123456]) id="([^"]+)">(.*)<\/\1>/g,
-  replace: '<$1 id="$2"><a href="#$2">$3</a></$1>'
-}
+  regex: /<(h[1-6]) id="([^"]+)">(.*?)<\/\1>/g,
+  replace: (_match, tag, id, text) => {
+    const iconSvg = `
+<svg class="anchor-icon" aria-hidden="true" viewBox="0 0 16 16" width="16" height="16">
+  <path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 
+           4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 
+           .751.751 0 0 1 .018-1.042.751.751 0 0 1 
+           1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5
+           a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25
+           a.751.751 0 0 1-1.042-.018.751.751 0 0 1
+           -.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 
+           2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018
+           .751.751 0 0 1 .018 1.042l-1.25 1.25
+           a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5
+           a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1
+           -.018 1.042.751.751 0 0 1-1.042.018
+           1.998 1.998 0 0 0-2.83 0l-2.5 2.5
+           a1.998 1.998 0 0 0 0 2.83Z"></path>
+</svg>`;
+    return `<${tag} id="${id}" class="heading-anchor">
+      <a href="#${id}" class="anchor-link" aria-label="Permalink">${iconSvg}</a>
+      ${text}
+    </${tag}>`;
+  }
+};
 
 const classMap = {
   img: 'img-responsive',
@@ -45,6 +68,46 @@ const normaliseBasePath = (basePath) => {
   return '/' + pathElements.join('/')
 }
 
+// ✅ NEW: GitHub-style diff block extension
+const diffBlockExtension = {
+  type: 'output',
+  regex: /<pre><code class="[^"]*(language-[^"]*diff|diff[^"]*language-[^"]*)[^"]*">([\s\S]*?)<\/code><\/pre>/g,
+  replace: function(_, className, code) {
+    const lines = code.split('\n').map(line => {
+      if (line.startsWith('+')) {
+        return `<span class="diff-add">${line}</span>`;
+      } else if (line.startsWith('-')) {
+        return `<span class="diff-remove">${line}</span>`;
+      } else {
+        return `<span class="diff-neutral">${line}</span>`;
+      }
+    }).join('\n');
+    return `<pre class="diff-block"><code>${lines}</code></pre>`;
+  }
+};
+
+
+// Github alerts output type extension
+const alertExtension = {
+  type: 'output',
+  regex: /<blockquote>\s*<p>\[!(NOTE|TIP|IMPORTANT|WARNING|CAUTION)\](.*?)<\/p>\s*<\/blockquote>/gis,
+  replace: function (_, type, innerHtml) {
+    const cleanContent = innerHtml.replace(/^\s*<br\s*\/?>\s*/i, '').trim();
+    const paragraphs = cleanContent
+      .split(/<br\s*\/?>/i)
+      .map(p => `<p dir="auto">${p.trim()}</p>`)
+      .join('');
+    const icon = alertIcons[type.toLowerCase()] || '';
+    return `<div class="markdown-alert markdown-alert-${type.toLowerCase()}" dir="auto">
+      <p class="markdown-alert-title" dir="auto">
+        ${icon}${type.charAt(0) + type.slice(1).toLowerCase()}
+      </p>
+      ${paragraphs}
+    </div>`;
+  }
+};
+
+
 const createParser = (options) => {
   const basePath = normaliseBasePath(options.basePath)
   const addBasePathToRootLinks = {
@@ -66,6 +129,8 @@ const createParser = (options) => {
       addBasePathToRootLinks,
       addBasePathToLinkHrefs,
       headingExtension,
+      diffBlockExtension,
+      alertExtension,
       ...bindings
     ]
   })

src/page-renderers/MortyPage.jsx

@@ -115,7 +115,7 @@ const contentStyles = `
   padding: 9.5px;
   margin: 0 0 10px;
   font-size: 13px;
-  line-height: 1.42857143;
+  line-height: 1; 
   color: #333;
   word-break: break-all;
   word-wrap: break-word;
@@ -171,6 +171,110 @@ const contentStyles = `
   border-top: 1px solid #ddd;
 }
 
+
+.diff-block .diff-add {
+  background-color: #e6ffed;
+  display: block;
+  white-space: pre;
+}
+
+.diff-block .diff-remove {
+  background-color: #ffeef0;
+  display: block;
+  white-space: pre;
+}
+
+.diff-block .diff-neutral {
+  display: block;
+  white-space: pre;
+}
+
+.markdown-alert {
+  padding: 0.5rem 1rem;
+  margin-bottom: 16px;
+  border-left: 0.25em solid;
+  border-radius: 6px;
+  background-color: var(--alert-bg, #f6f8fa);
+}
+
+.markdown-alert p {
+  margin: 0.5em 0;
+}
+
+.markdown-alert-title {
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  margin-bottom: 0.25rem;
+  color: normal !important;
+}
+
+.markdown-alert-title svg {
+  margin-right: 0.5rem;
+  flex-shrink: 0;
+}
+
+.markdown-alert-note {
+  border-color: #0969da;
+  --alert-bg: #ddf4ff;
+}
+
+.markdown-alert-tip {
+  border-color: #1a7f37;
+  --alert-bg: #dafbe1;
+}
+
+.markdown-alert-important {
+  border-color: #8250df;
+  --alert-bg: #fbefff;
+}
+
+.markdown-alert-warning {
+  border-color: #9a6700;
+  --alert-bg: #fff8c5;
+}
+
+.markdown-alert-caution {
+  border-color: #cf222e;
+  --alert-bg: #ffebe9;
+}
+
+/* Light mode colors for alerts */
+.markdown-alert-note    { color: #0969da; }
+.markdown-alert-tip     { color: #1a7f37; }
+.markdown-alert-important { color: #8250df; }
+.markdown-alert-warning { color: #9a6700; }
+.markdown-alert-caution { color: #d1242f; }
+
+.heading-anchor {
+  position: relative;
+}
+
+/* Position the icon absolutely so it doesn't push text */
+.heading-anchor .anchor-link {
+  position: absolute;
+  left: -24px;
+  top: 50%;
+  transform: translateY(-50%);
+  opacity: 0;
+  transition: opacity 0.15s ease-in-out;
+  color: #000; /* force black */
+  text-decoration: none;
+}
+
+.anchor-icon {
+  display: block;
+  width: 16px;
+  height: 16px;
+  fill: currentColor;
+}
+
+/* Show icon only when hovering over the heading */
+.heading-anchor:hover .anchor-link {
+  opacity: 1;
+}
+
+
 `
 
 const MortyPage = ({ relPath, body, options }) => {