feat(markdown): add custom emphasis styles for strong text

Author: SSShooter

src/dev.ts

@@ -41,6 +41,14 @@ const options: Options = {
     try {
       // Configure marked renderer to add target="_blank" to links
       const renderer = {
+        strong(token: Tokens.Strong) {
+          if (token.raw.startsWith('**')) {
+            return `<strong class="asterisk-emphasis">${token.text}</strong>`
+          } else if (token.raw.startsWith('__')) {
+            return `<strong class="underscore-emphasis">${token.text}</strong>`
+          }
+          return `<strong>${token.text}</strong>`
+        },
         link(token: Tokens.Link) {
           const href = token.href || ''
           const title = token.title ? ` title="${token.title}"` : ''
@@ -121,6 +129,7 @@ const options: Options = {
 let mind = new MindElixir(options)
 
 const data = MindElixir.new('new topic')
+// example.theme = MindElixir.DARK_THEME
 mind.init(example)
 
 const m2 = new MindElixir({

src/exampleData/1.ts

@@ -448,7 +448,7 @@ const aboutMindElixir: MindElixirDataWithUseMd = {
             useMd: true,
           },
           {
-            topic: '**Bold text** and *italic text* and ***bold italic***',
+            topic: '**Bold text** and __Highlight__ and *italic text*',
             id: 'markdown-emphasis',
             useMd: true,
           },

src/markdown.css

@@ -37,10 +37,15 @@
   font-style: italic;
 }
 
-.map-container strong,
+.map-container strong.asterisk-emphasis,
 .map-container em {
   color: var(--selected);
 }
+.map-container strong.underscore-emphasis {
+  background: rgba(255, 235, 59, 0.25); /* 可改颜色/透明度 */
+  padding: 0.05em 0.15em;
+  border-radius: 0.15em;
+}
 
 .map-container a {
   color: var(--selected);