fix: line class omission (#111)

src/index.ts

@@ -55,10 +55,13 @@ function toFragment(
  const code = pre.children[0];
 
  // Remove class="shiki"
- pre.properties.className = undefined;
+ if (Array.isArray(pre.properties?.className) && pre.properties?.className.includes('shiki')) {
+ const className = pre.properties.className.filter(c => c !== 'shiki');
+ pre.properties.className = className.length > 0 ? className : undefined;
+ }
 
  if (!keepBackground) {
- pre.properties = {};
+ pre.properties.style = undefined;
  }
 
  pre.properties['data-language'] = lang;
@@ -396,7 +399,8 @@ export default function rehypePrettyCode(
  element.children = [{ type: 'text', value: ' ' }];
  }
 
- element.properties.className = undefined;
+ const className = element.properties.className.filter(c => c !== 'line');
+ element.properties.className = className.length > 0 ? className : undefined;
  element.properties['data-line'] = '';
  onVisitLine?.(element as LineElement);
 

test/results/ansi.html

@@ -41,6 +41,7 @@ <h2>ANSI</h2>
  vite --port 3123
  </div>
  <pre
+ class="github-dark"
  style="background-color: #24292e"
  tabindex="0"
  data-language="ansi"

test/results/caption.html

@@ -34,6 +34,7 @@ <h2>Caption</h2>
 <p>caption="Immutable variable declaration"</p>
 <div data-rehype-pretty-code-fragment="">
  <pre
+ class="github-dark"
  style="background-color: #24292e"
  tabindex="0"
  data-language="js"
@@ -59,6 +60,7 @@ <h2>Caption</h2>
  ./components/index.js
  </div>
  <pre
+ class="github-dark"
  style="background-color: #24292e"
  tabindex="0"
  data-language="js"
@@ -76,6 +78,7 @@ <h2>Caption</h2>
 <p>caption="Immutable variable declaration" /caption/</p>
 <div data-rehype-pretty-code-fragment="">
  <pre
+ class="github-dark"
  style="background-color: #24292e"
  tabindex="0"
  data-language="js"

test/results/defaultLang.block=js.html

@@ -34,6 +34,7 @@ <h2>Default language</h2>
 <p>{ block: 'js' }</p>
 <div data-rehype-pretty-code-fragment="">
  <pre
+ class="github-dark"
  style="background-color: #24292e"
  tabindex="0"
  data-language="js"

test/results/defaultLang.inline=js&block=js.html

@@ -34,6 +34,7 @@ <h2>Default language</h2>
 <p>{ block: 'js', inline: 'js' }</p>
 <div data-rehype-pretty-code-fragment="">
  <pre
+ class="github-dark"
  style="background-color: #24292e"
  tabindex="0"
  data-language="js"

test/results/defaultLang.inline=js.html

@@ -34,6 +34,7 @@ <h2>Default language</h2>
 <p>{ inline: 'js' }</p>
 <div data-rehype-pretty-code-fragment="">
  <pre
+ class="github-dark"
  style="background-color: #24292e"
  tabindex="0"
  data-language=""

test/results/defaultLang.js.html

@@ -34,6 +34,7 @@ <h2>Default language</h2>
 <p>js</p>
 <div data-rehype-pretty-code-fragment="">
  <pre
+ class="github-dark"
  style="background-color: #24292e"
  tabindex="0"
  data-language="js"

test/results/diff.html

@@ -33,6 +33,7 @@
 <h2>Diff</h2>
 <div data-rehype-pretty-code-fragment="">
  <pre
+ class="github-dark"
  style="background-color: #24292e"
  tabindex="0"
  data-language="diff"

test/results/filterMetaString.html

@@ -33,6 +33,7 @@
 <h1>Filter meta string</h1>
 <div data-rehype-pretty-code-fragment="">
  <pre
+ class="github-dark"
  style="background-color: #24292e"
  tabindex="0"
  data-language="js"

test/results/highlightChars.html

@@ -34,6 +34,7 @@ <h2>Highlight chars</h2>
 <p>/carrot/</p>
 <div data-rehype-pretty-code-fragment="">
  <pre
+ class="github-dark"
  style="background-color: #24292e"
  tabindex="0"
  data-language="js"

test/results/highlightCharsById.html

@@ -34,6 +34,7 @@ <h2>Highlight chars by id</h2>
 <p>/age/#a /name/#a /setAge/#b /setName/#b /42/#c /'Taylor'/#c</p>
 <div data-rehype-pretty-code-fragment="">
  <pre
+ class="github-dark"
  style="background-color: #24292e"
  tabindex="0"
  data-language="js"
@@ -62,6 +63,7 @@ <h2>Highlight chars by id</h2>
 <p><code>/&#x3C;div/#a /id="true">/#b</code></p>
 <div data-rehype-pretty-code-fragment="">
  <pre
+ class="github-dark"
  style="background-color: #24292e"
  tabindex="0"
  data-language="js"
@@ -77,6 +79,7 @@ <h2>Highlight chars by id</h2>
 <p>/age/#id</p>
 <div data-rehype-pretty-code-fragment="">
  <pre
+ class="github-dark"
  style="background-color: #24292e"
  tabindex="0"
  data-language="js"
@@ -92,6 +95,7 @@ <h2>Highlight chars by id</h2>
 <p>/age/2</p>
 <div data-rehype-pretty-code-fragment="">
  <pre
+ class="github-dark"
  style="background-color: #24292e"
  tabindex="0"
  data-language="js"
@@ -101,6 +105,7 @@ <h2>Highlight chars by id</h2>
 <p>/car/1</p>
 <div data-rehype-pretty-code-fragment="">
  <pre
+ class="github-dark"
  style="background-color: #24292e"
  tabindex="0"
  data-language="js"

test/results/highlightCharsComplex.html

@@ -34,6 +34,7 @@ <h1>Highlight chars complex</h1>
 <p>/&#x3C;span class="test/</p>
 <div data-rehype-pretty-code-fragment="">
  <pre
+ class="github-dark"
  style="background-color: #24292e"
  tabindex="0"
  data-language="html"
@@ -43,6 +44,7 @@ <h1>Highlight chars complex</h1>
 <p>/span class="test"/</p>
 <div data-rehype-pretty-code-fragment="">
  <pre
+ class="github-dark"
  style="background-color: #24292e"
  tabindex="0"
  data-language="html"
@@ -52,6 +54,7 @@ <h1>Highlight chars complex</h1>
 <p>/test"/</p>
 <div data-rehype-pretty-code-fragment="">
  <pre
+ class="github-dark"
  style="background-color: #24292e"
  tabindex="0"
  data-language="html"
@@ -61,6 +64,7 @@ <h1>Highlight chars complex</h1>
 <p>/"test/</p>
 <div data-rehype-pretty-code-fragment="">
  <pre
+ class="github-dark"
  style="background-color: #24292e"
  tabindex="0"
  data-language="html"
@@ -70,6 +74,7 @@ <h1>Highlight chars complex</h1>
 <p>/"te/</p>
 <div data-rehype-pretty-code-fragment="">
  <pre
+ class="github-dark"
  style="background-color: #24292e"
  tabindex="0"
  data-language="html"
@@ -79,6 +84,7 @@ <h1>Highlight chars complex</h1>
 <p>/st"/</p>
 <div data-rehype-pretty-code-fragment="">
  <pre
+ class="github-dark"
  style="background-color: #24292e"
  tabindex="0"
  data-language="html"
@@ -88,6 +94,7 @@ <h1>Highlight chars complex</h1>
 <p>/st">/</p>
 <div data-rehype-pretty-code-fragment="">
  <pre
+ class="github-dark"
  style="background-color: #24292e"
  tabindex="0"
  data-language="html"
@@ -97,6 +104,7 @@ <h1>Highlight chars complex</h1>
 <p>/="te/</p>
 <div data-rehype-pretty-code-fragment="">
  <pre
+ class="github-dark"
  style="background-color: #24292e"
  tabindex="0"
  data-language="html"
@@ -106,6 +114,7 @@ <h1>Highlight chars complex</h1>
 <p>/>/</p>
 <div data-rehype-pretty-code-fragment="">
  <pre
+ class="github-dark"
  style="background-color: #24292e"
  tabindex="0"
  data-language="html"
@@ -115,6 +124,7 @@ <h1>Highlight chars complex</h1>
 <p>/&#x3C;/</p>
 <div data-rehype-pretty-code-fragment="">
  <pre
+ class="github-dark"
  style="background-color: #24292e"
  tabindex="0"
  data-language="html"
@@ -124,6 +134,7 @@ <h1>Highlight chars complex</h1>
 <p>/&#x3C;>/</p>
 <div data-rehype-pretty-code-fragment="">
  <pre
+ class="github-dark"
  style="background-color: #24292e"
  tabindex="0"
  data-language="html"
@@ -133,6 +144,7 @@ <h1>Highlight chars complex</h1>
 <p>/theme: 'monokai'/</p>
 <div data-rehype-pretty-code-fragment="">
  <pre
+ class="github-dark"
  style="background-color: #24292e"
  tabindex="0"
  data-language="js"
@@ -144,6 +156,7 @@ <h1>Highlight chars complex</h1>
 <p>/ theme: /</p>
 <div data-rehype-pretty-code-fragment="">
  <pre
+ class="github-dark"
  style="background-color: #24292e"
  tabindex="0"
  data-language="js"
@@ -155,6 +168,7 @@ <h1>Highlight chars complex</h1>
 <p>/light &#x26;&#x26; fluffy/</p>
 <div data-rehype-pretty-code-fragment="">
  <pre
+ class="github-dark"
  style="background-color: #24292e"
  tabindex="0"
  data-language="js"
@@ -166,6 +180,7 @@ <h1>Highlight chars complex</h1>
 <p>/car/</p>
 <div data-rehype-pretty-code-fragment="">
  <pre
+ class="github-dark"
  style="background-color: #24292e"
  tabindex="0"
  data-language="js"
@@ -176,6 +191,7 @@ <h1>Highlight chars complex</h1>
 <p>/car,/2</p>
 <div data-rehype-pretty-code-fragment="">
  <pre
+ class="github-dark"
  style="background-color: #24292e"
  tabindex="0"
  data-language="js"
@@ -186,6 +202,7 @@ <h1>Highlight chars complex</h1>
 <p>/,car/1</p>
 <div data-rehype-pretty-code-fragment="">
  <pre
+ class="github-dark"
  style="background-color: #24292e"
  tabindex="0"
  data-language="js"
@@ -196,6 +213,7 @@ <h1>Highlight chars complex</h1>
 <p>/ot,ca/</p>
 <div data-rehype-pretty-code-fragment="">
  <pre
+ class="github-dark"
  style="background-color: #24292e"
  tabindex="0"
  data-language="js"

test/results/highlightCharsRange.html

@@ -34,6 +34,7 @@ <h2>Highlighted chars range</h2>
 <p>/getStringLength/1-2</p>
 <div data-rehype-pretty-code-fragment="">
  <pre
+ class="github-dark"
  style="background-color: #24292e"
  tabindex="0"
  data-language="js"
@@ -47,6 +48,7 @@ <h2>Highlighted chars range</h2>
 <p>/getStringLength/1,3</p>
 <div data-rehype-pretty-code-fragment="">
  <pre
+ class="github-dark"
  style="background-color: #24292e"
  tabindex="0"
  data-language="js"
@@ -60,6 +62,7 @@ <h2>Highlighted chars range</h2>
 <p>/getStringLength/2,5,6</p>
 <div data-rehype-pretty-code-fragment="">
  <pre
+ class="github-dark"
  style="background-color: #24292e"
  tabindex="0"
  data-language="js"

test/results/highlightMultipleChars.html

@@ -34,6 +34,7 @@ <h2>Highlighted multiple chars</h2>
 <p>/carrot/ /return/</p>
 <div data-rehype-pretty-code-fragment="">
  <pre
+ class="github-dark"
  style="background-color: #24292e"
  tabindex="0"
  data-language="js"

test/results/highlightPartialNode.html

@@ -34,6 +34,7 @@ <h2>Highlighted partial node</h2>
 <p>/carrot/</p>
 <div data-rehype-pretty-code-fragment="">
  <pre
+ class="github-dark"
  style="background-color: #24292e"
  tabindex="0"
  data-language="js"
@@ -44,6 +45,7 @@ <h2>Highlighted partial node</h2>
 </div>
 <div data-rehype-pretty-code-fragment="">
  <pre
+ class="github-dark"
  style="background-color: #24292e"
  tabindex="0"
  data-language="js"
@@ -54,6 +56,7 @@ <h2>Highlighted partial node</h2>
 </div>
 <div data-rehype-pretty-code-fragment="">
  <pre
+ class="github-dark"
  style="background-color: #24292e"
  tabindex="0"
  data-language="js"
@@ -64,6 +67,7 @@ <h2>Highlighted partial node</h2>
 </div>
 <div data-rehype-pretty-code-fragment="">
  <pre
+ class="github-dark"
  style="background-color: #24292e"
  tabindex="0"
  data-language="js"

test/results/highlightedLine.html

@@ -34,6 +34,7 @@ <h2>Highlighted line</h2>
 <p>{1}</p>
 <div data-rehype-pretty-code-fragment="">
  <pre
+ class="github-dark"
  style="background-color: #24292e"
  tabindex="0"
  data-language="js"

test/results/highlightedLines.html

@@ -34,6 +34,7 @@ <h2>Highlighted lines</h2>
 <p>{1, 3, 6-8}</p>
 <div data-rehype-pretty-code-fragment="">
  <pre
+ class="github-dark"
  style="background-color: #24292e"
  tabindex="0"
  data-language="js"

test/results/highlightedLinesWithShowLineNumbersAt.html

@@ -34,6 +34,7 @@ <h2>Highlighted lines with showLineNumbersAt</h2>
 <p>{1, 3, 6-8} showLineNumbers{3}</p>
 <div data-rehype-pretty-code-fragment="">
  <pre
+ class="github-dark"
  style="background-color: #24292e"
  tabindex="0"
  data-language="js"
@@ -51,6 +52,7 @@ <h2>Highlighted lines with showLineNumbersAt</h2>
 <p>showLineNumbers{3} {1, 3, 6-8}</p>
 <div data-rehype-pretty-code-fragment="">
  <pre
+ class="github-dark"
  style="background-color: #24292e"
  tabindex="0"
  data-language="js"