feat: allow customize tabindex, close #778

Author: antfu

packages/core/src/highlight/code-to-hast.ts

@@ -90,6 +90,7 @@ export function tokensToHast(
 
   const {
     structure = 'classic',
+    tabindex = '0',
   } = options
 
   let preNode: Element = {
@@ -98,7 +99,11 @@ export function tokensToHast(
     properties: {
       class: `shiki ${options.themeName || ''}`,
       style: options.rootStyle || `background-color:${options.bg};color:${options.fg}`,
-      tabindex: '0',
+      ...(tabindex !== false && tabindex != null)
+        ? {
+            tabindex: tabindex.toString(),
+          }
+        : {},
       ...Object.fromEntries(
         Array.from(
           Object.entries(options.meta || {}),

packages/shiki/test/hast.test.ts

@@ -48,6 +48,7 @@ it('hasfocus support', async () => {
   const code = await codeToHtml(snippet, {
     lang: 'php',
     theme: 'vitesse-light',
+    tabindex: false,
     transformers: [
       {
         code(node) {
@@ -67,7 +68,7 @@ it('hasfocus support', async () => {
 
   expect(code)
     .toMatchInlineSnapshot(`
-      "<pre class="shiki vitesse-light" style="background-color:#ffffff;color:#393a34" tabindex="0"><code class="language-php"><span class="line"><span style="color:#999999">$</span><span style="color:#B07D48">foo</span><span style="color:#999999"> =</span><span style="color:#B5695977"> "</span><span style="color:#B56959">bar</span><span style="color:#B5695977">"</span><span style="color:#999999">;</span></span>
+      "<pre class="shiki vitesse-light" style="background-color:#ffffff;color:#393a34"><code class="language-php"><span class="line"><span style="color:#999999">$</span><span style="color:#B07D48">foo</span><span style="color:#999999"> =</span><span style="color:#B5695977"> "</span><span style="color:#B56959">bar</span><span style="color:#B5695977">"</span><span style="color:#999999">;</span></span>
       <span class="line" data-has-focus="true"><span style="color:#999999">$</span><span style="color:#B07D48">test</span><span style="color:#999999"> =</span><span style="color:#B5695977"> "</span><span style="color:#B56959">owo</span><span style="color:#B5695977">"</span><span style="color:#999999">;</span><span style="color:#A0ADA0"></span></span>
       <span class="line"><span style="color:#999999">$</span><span style="color:#B07D48">bar</span><span style="color:#999999"> =</span><span style="color:#B5695977"> "</span><span style="color:#B56959">baz</span><span style="color:#B5695977">"</span><span style="color:#999999">;</span></span></code></pre>"
     `)

packages/types/src/options.ts

@@ -153,6 +153,15 @@ export interface CodeToHastOptionsCommon<Languages extends string = string>
    * @default 'classic'
    */
   structure?: 'classic' | 'inline'
+
+  /**
+   * Tab index of the root `<pre>` element.
+   *
+   * Set to `false` to disable tab index.
+   *
+   * @default 0
+   */
+  tabindex?: number | string | false
 }
 
 export interface CodeOptionsMeta {