show title

packages/app/src/components/ReactMarkdownComponents/CodeBlock.module.scss

@@ -7,3 +7,16 @@
   border: 1px solid;
   border-radius: bs.$border-radius;
 }
+
+.code-highlighted-title {
+  position: absolute;
+  top: 0;
+  right: 0.5em;
+  padding: 0 4px;
+  font-style: normal;
+  font-weight: bold;
+  color: bs.$gray-900;
+  background: bs.$gray-300;
+  border-radius: bs.$border-radius;
+  opacity: 0.6;
+}

packages/app/src/components/ReactMarkdownComponents/CodeBlock.tsx

@@ -11,16 +11,23 @@ export const CodeBlock: CodeComponent = ({ inline, className, children }) => {
 
   // TODO: set border according to the value of 'customize:highlightJsStyleBorder'
 
-  const match = /language-(\w+)/.exec(className || '');
+  const match = /language-(\w+)(:?.+)?/.exec(className || '');
   const lang = match && match[1] ? match[1] : '';
+  const name = match && match[2] ? match[2].slice(1) : null;
+
   return (
-    <SyntaxHighlighter
-      className="code-highlighted"
-      PreTag="div"
-      style={oneLight}
-      language={lang}
-    >
-      {String(children).replace(/\n$/, '')}
-    </SyntaxHighlighter>
+    <>
+      {name != null && (
+        <cite className={`code-highlighted-title ${styles['code-highlighted-title']}`}>{name}</cite>
+      )}
+      <SyntaxHighlighter
+        className="code-highlighted"
+        PreTag="div"
+        style={oneLight}
+        language={lang}
+      >
+        {String(children).replace(/\n$/, '')}
+      </SyntaxHighlighter>
+    </>
   );
 };

packages/app/src/styles/_wiki.scss

@@ -113,6 +113,10 @@
     }
   }
 
+  pre {
+    position: relative; // for absolute positioned .code-highlighted-title
+  }
+
   .task-list {
     .task-list-item {
       margin: 0 0.2em 0.25em -1.6em;