feat: update container replacement logic to include language variable…

… (`%l`) alongside highlighted code (`%s`) and original code (`%t`)
bent10 · Apr 14, 2024 · 65fece0 · 65fece0
1 parent 39325db
commit 65fece0
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 7 deletions.
diff --git a/packages/shiki/readme.md b/packages/shiki/readme.md
@@ -575,11 +575,6 @@ pre.shiki code {
 
 This function creates a Marked extension that integrates Shiki for syntax highlighting.
 
-`options`: An object containing the following properties:
-
-- `highlight`: A function that formats and highlights the code according to a specific coding style or convention.
-- `container` (optional): A string representing the HTML container for the highlighted code. Default is `'%s'`.
-
 ```js
 import { marked } from 'marked'
 import markedShiki from 'marked-shiki'
@@ -599,6 +594,17 @@ const html = await marked.use(
 )
 ```
 
+`options`: An object containing the following properties:
+
+- `highlight`: A function that formats and highlights the code according to a specific coding style or convention.
+- `container` (optional): A string representing the HTML container for the highlighted code. Default is `'%s'`.
+
+  Below are the available template placeholders:
+
+  - `%s`: Represents the highlighted code.
+  - `%t`: Represents the original code.
+  - `%l`: Represents the language.
+
 ## Related
 
 See [extensions list](https://github.com/bent10/marked-extensions#packages).

diff --git a/packages/shiki/src/index.ts b/packages/shiki/src/index.ts
@@ -44,13 +44,16 @@ export default function markedShiki(options: Options = {}): MarkedExtension {
         return
 
       try {
-        const [lang, ...props] = token.lang.split(' ')
+        const [lang = 'text', ...props] = token.lang.split(' ')
 
         const { text } = token
         const highlightedText = await highlight(text, lang, props)
         const htmlText = !container
           ? highlightedText
-          : container.replace('%s', highlightedText).replace('%t', text)
+          : container
+              .replace('%l', String(lang).toUpperCase())
+              .replace('%s', highlightedText)
+              .replace('%t', text)
 
         // transforms token to html
         Object.assign(token, {

diff --git a/packages/shiki/test/__snapshots__/index.test.ts.snap b/packages/shiki/test/__snapshots__/index.test.ts.snap
@@ -78,6 +78,7 @@ printImportant('ERROR', 'This is a message')
 <span class="line"></span>
 <span class="line"><span style="color:#DCBDFB">printImportant</span><span style="color:#ADBAC7">(</span><span style="color:#96D0FF">'ERROR'</span><span style="color:#ADBAC7">, </span><span style="color:#96D0FF">'This is a message'</span><span style="color:#ADBAC7">)</span></span>
 <span class="line"></span></code></pre></div>
+<div class="qux">TS</div>
 </div>
 "
 `;

diff --git a/packages/shiki/test/index.test.ts b/packages/shiki/test/index.test.ts
@@ -55,6 +55,7 @@ it('should correctly highlight code blocks with custom container', async () => {
         container: `<div class="foo">
 <div class="bar">%t</div>
 <div class="baz">%s</div>
+<div class="qux">%l</div>
 </div>`,
         async highlight(code, lang) {
           return highlighter.codeToHtml(code, {