Merge pull request #5 from posthtml/fix/trim-source

README.md

@@ -392,8 +392,8 @@ posthtml([
     decorations: [
       {
         // line and character are 0-indexed
-        start: { line: 1, character: 2 },
-        end: { line: 1, character: 7 },
+        start: { line: 0, character: 0 },
+        end: { line: 0, character: 5 },
         properties: { class: 'highlighted-word' }
       }
     ]

lib/index.js

@@ -55,7 +55,7 @@ const plugin = (options = {}) => tree => {
         .then(highlighter => {
           highlighterOptions.lang = attrs.lang || attrs.language || options.langs[0]
           const wrapTag = attrs.wrap || options.wrapTag
-          const source = render(node.content)
+          const source = render(node.content).trim()
 
           if (attrs['default-color']) {
             highlighterOptions.defaultColor = attrs['default-color']

test/expected/basic.html

@@ -1,3 +1 @@
-<pre class="shiki nord" style="background-color:#2e3440ff;color:#d8dee9ff" tabindex="0"><code><span class="line"></span>
-<span class="line"><span style="color:#81A1C1">  &#x3C;h1</span><span style="color:#8FBCBB"> class</span><span style="color:#ECEFF4">=</span><span style="color:#ECEFF4">"</span><span style="color:#A3BE8C">text-xl</span><span style="color:#ECEFF4">"</span><span style="color:#81A1C1">></span><span style="color:#D8DEE9FF">Hello</span><span style="color:#81A1C1">&#x3C;/h1></span></span>
-<span class="line"></span></code></pre>
+<pre class="shiki nord" style="background-color:#2e3440ff;color:#d8dee9ff" tabindex="0"><code><span class="line"><span style="color:#81A1C1">&#x3C;h1</span><span style="color:#8FBCBB"> class</span><span style="color:#ECEFF4">=</span><span style="color:#ECEFF4">"</span><span style="color:#A3BE8C">text-xl</span><span style="color:#ECEFF4">"</span><span style="color:#81A1C1">></span><span style="color:#D8DEE9FF">Hello</span><span style="color:#81A1C1">&#x3C;/h1></span></span></code></pre>

test/expected/custom-lang.html

@@ -1,4 +1,2 @@
-<pre class="shiki nord" style="background-color:#2e3440ff;color:#d8dee9ff" tabindex="0"><code><span class="line"></span>
-<span class="line"><span style="color:#ECEFF4">-</span><span style="color:#BF616A">  &#x3C;h1 class="text-xl">Hello&#x3C;/h1></span></span>
-<span class="line"><span style="color:#ECEFF4">+</span><span style="color:#A3BE8C">  &#x3C;h1 class="text-xl">Hello!&#x3C;/h1></span></span>
-<span class="line"></span></code></pre>
+<pre class="shiki nord" style="background-color:#2e3440ff;color:#d8dee9ff" tabindex="0"><code><span class="line"><span style="color:#ECEFF4">-</span><span style="color:#BF616A">  &#x3C;h1 class="text-xl">Hello&#x3C;/h1></span></span>
+<span class="line"><span style="color:#ECEFF4">+</span><span style="color:#A3BE8C">  &#x3C;h1 class="text-xl">Hello!&#x3C;/h1></span></span></code></pre>

test/expected/custom-theme.html

@@ -1,3 +1 @@
-<pre class="shiki my-theme" style="background-color:#1e1e1e;color:#bbbbbb" tabindex="0"><code><span class="line"></span>
-<span class="line"><span style="color:#BBBBBB">  &#x3C;h1 class=</span><span style="color:#888">"text-xl"</span><span style="color:#BBBBBB">>Hello&#x3C;/h1></span></span>
-<span class="line"></span></code></pre>
+<pre class="shiki my-theme" style="background-color:#1e1e1e;color:#bbbbbb" tabindex="0"><code><span class="line"><span style="color:#BBBBBB">&#x3C;h1 class=</span><span style="color:#888">"text-xl"</span><span style="color:#BBBBBB">>Hello&#x3C;/h1></span></span></code></pre>

test/expected/decorations.html

@@ -1,3 +1 @@
-<pre class="shiki nord" style="background-color:#2e3440ff;color:#d8dee9ff" tabindex="0"><code><span class="line"></span>
-<span class="line"><span style="color:#81A1C1">  </span><span style="color:#81A1C1" class="highlighted-word">import</span><span style="color:#ECEFF4"> {</span><span style="color:#8FBCBB"> codeToHtml</span><span style="color:#ECEFF4"> }</span><span style="color:#81A1C1"> from</span><span style="color:#ECEFF4"> '</span><span style="color:#A3BE8C">shiki</span><span style="color:#ECEFF4">'</span></span>
-<span class="line"></span></code></pre>
+<pre class="shiki nord" style="background-color:#2e3440ff;color:#d8dee9ff" tabindex="0"><code><span class="line"><span style="color:#81A1C1">import</span><span style="color:#ECEFF4"> {</span><span style="color:#8FBCBB"> </span><span style="color:#8FBCBB" class="highlighted-word">codeToHtml</span><span style="color:#ECEFF4"> }</span><span style="color:#81A1C1"> from</span><span style="color:#ECEFF4"> '</span><span style="color:#A3BE8C">shiki</span><span style="color:#ECEFF4">'</span></span></code></pre>

test/expected/default-color.html

@@ -1,3 +1 @@
-<pre class="shiki shiki-themes github-dark github-light" style="background-color:#24292e;--shiki-light-bg:#fff;color:#e1e4e8;--shiki-light:#24292e" tabindex="0"><code><span class="line"></span>
-<span class="line"><span style="color:#F97583;--shiki-light:#D73A49">  import</span><span style="color:#E1E4E8;--shiki-light:#24292E"> { codeToHtml } </span><span style="color:#F97583;--shiki-light:#D73A49">from</span><span style="color:#9ECBFF;--shiki-light:#032F62"> 'shiki'</span></span>
-<span class="line"></span></code></pre>
+<pre class="shiki shiki-themes github-dark github-light" style="background-color:#24292e;--shiki-light-bg:#fff;color:#e1e4e8;--shiki-light:#24292e" tabindex="0"><code><span class="line"><span style="color:#F97583;--shiki-light:#D73A49">import</span><span style="color:#E1E4E8;--shiki-light:#24292E"> { codeToHtml } </span><span style="color:#F97583;--shiki-light:#D73A49">from</span><span style="color:#9ECBFF;--shiki-light:#032F62"> 'shiki'</span></span></code></pre>

test/expected/dual-themes.html

@@ -1,7 +1,3 @@
-<pre class="shiki shiki-themes github-light github-dark" style="background-color:#fff;--shiki-dark-bg:#24292e;color:#24292e;--shiki-dark:#e1e4e8" tabindex="0"><code><span class="line"></span>
-<span class="line"><span style="color:#D73A49;--shiki-dark:#F97583">  import</span><span style="color:#24292E;--shiki-dark:#E1E4E8"> { codeToHtml } </span><span style="color:#D73A49;--shiki-dark:#F97583">from</span><span style="color:#032F62;--shiki-dark:#9ECBFF"> 'shiki'</span></span>
-<span class="line"></span></code></pre>
+<pre class="shiki shiki-themes github-light github-dark" style="background-color:#fff;--shiki-dark-bg:#24292e;color:#24292e;--shiki-dark:#e1e4e8" tabindex="0"><code><span class="line"><span style="color:#D73A49;--shiki-dark:#F97583">import</span><span style="color:#24292E;--shiki-dark:#E1E4E8"> { codeToHtml } </span><span style="color:#D73A49;--shiki-dark:#F97583">from</span><span style="color:#032F62;--shiki-dark:#9ECBFF"> 'shiki'</span></span></code></pre>
 
-<pre class="shiki shiki-themes github-dark github-light" style="background-color:#24292e;--shiki-light-bg:#fff;color:#e1e4e8;--shiki-light:#24292e" tabindex="0"><code><span class="line"></span>
-<span class="line"><span style="color:#F97583;--shiki-light:#D73A49">  import</span><span style="color:#E1E4E8;--shiki-light:#24292E"> { codeToHtml } </span><span style="color:#F97583;--shiki-light:#D73A49">from</span><span style="color:#9ECBFF;--shiki-light:#032F62"> 'shiki'</span></span>
-<span class="line"></span></code></pre>
+<pre class="shiki shiki-themes github-dark github-light" style="background-color:#24292e;--shiki-light-bg:#fff;color:#e1e4e8;--shiki-light:#24292e" tabindex="0"><code><span class="line"><span style="color:#F97583;--shiki-light:#D73A49">import</span><span style="color:#E1E4E8;--shiki-light:#24292E"> { codeToHtml } </span><span style="color:#F97583;--shiki-light:#D73A49">from</span><span style="color:#9ECBFF;--shiki-light:#032F62"> 'shiki'</span></span></code></pre>

test/expected/theme.html

@@ -1,3 +1 @@
-<pre class="shiki github-light" style="background-color:#fff;color:#24292e" tabindex="0"><code><span class="line"></span>
-<span class="line"><span style="color:#24292E">  &#x3C;</span><span style="color:#22863A">h1</span><span style="color:#6F42C1"> class</span><span style="color:#24292E">=</span><span style="color:#032F62">"text-xl"</span><span style="color:#24292E">>Hello&#x3C;/</span><span style="color:#22863A">h1</span><span style="color:#24292E">></span></span>
-<span class="line"></span></code></pre>
+<pre class="shiki github-light" style="background-color:#fff;color:#24292e" tabindex="0"><code><span class="line"><span style="color:#24292E">&#x3C;</span><span style="color:#22863A">h1</span><span style="color:#6F42C1"> class</span><span style="color:#24292E">=</span><span style="color:#032F62">"text-xl"</span><span style="color:#24292E">>Hello&#x3C;/</span><span style="color:#22863A">h1</span><span style="color:#24292E">></span></span></code></pre>

test/expected/transformers.html

@@ -1,3 +1 @@
-<pre class="shiki nord" style="background-color:#2e3440ff;color:#d8dee9ff" tabindex="0"><code class="language-js"><span class="line"></span>
-<span class="line"><span style="color:#81A1C1">  import</span><span style="color:#ECEFF4"> {</span><span style="color:#8FBCBB"> codeToHtml</span><span style="color:#ECEFF4"> }</span><span style="color:#81A1C1"> from</span><span style="color:#ECEFF4"> '</span><span style="color:#A3BE8C">shiki</span><span style="color:#ECEFF4">'</span></span>
-<span class="line"></span></code></pre>
+<pre class="shiki nord" style="background-color:#2e3440ff;color:#d8dee9ff" tabindex="0"><code class="language-js"><span class="line"><span style="color:#81A1C1">import</span><span style="color:#ECEFF4"> {</span><span style="color:#8FBCBB"> codeToHtml</span><span style="color:#ECEFF4"> }</span><span style="color:#81A1C1"> from</span><span style="color:#ECEFF4"> '</span><span style="color:#A3BE8C">shiki</span><span style="color:#ECEFF4">'</span></span></code></pre>

test/test.js

@@ -60,8 +60,8 @@ test('decorations', () => {
     decorations: [
       {
         // line and character are 0-indexed
-        start: { line: 1, character: 2 },
-        end: { line: 1, character: 8 },
+        start: { line: 0, character: 9 }, // or start: 9
+        end: { line: 0, character: 19 }, // or end: 19
         properties: { class: 'highlighted-word' }
       }
     ]