Skip to content

Commit

Permalink
docs: update diff example
Browse files Browse the repository at this point in the history
  • Loading branch information
@naiyerasif
naiyerasif committed Jul 27, 2024
1 parent 48c792b commit 919d61c
Show file tree
Hide file tree
Showing 3 changed files with 50 additions and 25 deletions.
22 changes: 22 additions & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,26 @@ All notable changes to this project will be documented in this file.
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).

## [6.1.0] - 2024-07-27

### Changed

- Rolls back breaking changes in v6.0.0

### Added

- Improve diff decorations

## [6.0.0] - 2024-07-27

### Added

- Plugin to soft wrap lines with `wrap` property

### Removed

- **Breaking** `wrap` option to soft wrap the entire codeblock by setting it to `true`

## [5.0.0] - 2024-07-07

### Added
Expand Down Expand Up @@ -129,6 +149,8 @@ Syntax highlight plugin with support for following additional features
- support for prompt
- captions and language information

[6.1.0]: https://github.com/Microflash/rehype-starry-night/compare/v6.0.0...v6.1.0
[6.0.0]: https://github.com/Microflash/rehype-starry-night/compare/v5.0.0...v6.0.0
[5.0.0]: https://github.com/Microflash/rehype-starry-night/compare/v4.1.0...v5.0.0
[4.1.0]: https://github.com/Microflash/rehype-starry-night/compare/v4.0.0...v4.1.0
[4.0.0]: https://github.com/Microflash/rehype-starry-night/compare/v3.6.0...v4.0.0
Expand Down
53 changes: 28 additions & 25 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -521,38 +521,41 @@ See the documentation of [`fenceparser`](https://github.com/Microflash/fencepars

You can render code diffs using `ins` and `del` properties on the codeblock followed by a range of line numbers.

```svg del{2..7} ins{8..10}
<svg width="800px" height="800px" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="#000" stroke-width="8" stroke-linecap="round" stroke-linejoin="round">
<path d="M52.4172 129.945C154.767 124.431 299.051 80.9206 362.913 182.602C369.254 192.695 372.11 221.082 363.911 231.283C340.825 260.002 85.1022 258.994 38.4434 258.994"/>
<path d="M371.656 279.262C260.686 278.71 142.19 286.441 33.0469 281.78"/>
<path d="M264.29 133.538C247.656 199.764 297.805 187.344 346.025 180.575"/>
<path d="M240.21 132.188C251.965 213.876 84.6787 176.294 29 190.197"/>
<path d="M171.274 140.283C166.221 155.378 170.086 170.931 170.086 186.15"/>
<path d="M96.7925 144.33C93.1231 154.511 95.5446 187.149 95.6053 187.499"/>
<path d="M52.417 129.945c102.35-5.514 246.634-49.024 310.496 52.657 6.341 10.093 9.197 38.48.998 48.681-23.086 28.719-278.809 27.711-325.468 27.711m333.213 20.268c-110.97-.552-229.466 7.179-338.61 2.518"/>
<path d="M264.29 133.538c-16.634 66.226 33.515 53.806 81.735 47.037M240.21 132.188C251.965 213.876 84.679 176.294 29 190.197"/>
<path d="M171.274 140.283c-5.053 15.095-1.188 30.648-1.188 45.867m-73.293-41.82c-3.67 10.181-1.248 42.819-1.188 43.169"/>
</svg>
```js title="Pool options in Vitest 2.0" del{4..6} ins{7..9}
export default defineConfig({
test: {
poolOptions: {
threads: {
singleThread: true,
},
forks: {
singleFork: true,
},
}
}
});
```

The above codeblock gets rendered as:

```html
<div class="hl hl-svg">
<div class="hl hl-js">
<div class="hl-header">
<div class="hl-language">svg</div>
<div class="hl-language">js</div>
<div class="hl-title">Pool options in Vitest 2.0</div>
</div>
<pre id="MC4xOTg0NzY4" style="--hl-line-number-gutter-factor: 2; --hl-line-marker-gutter-factor: 1"><code tabindex="0"><span class="line"><span class="line-number" aria-hidden="true">1</span>&lt;<span class="pl-ent">svg</span> <span class="pl-e">width</span>=<span class="pl-s"><span class="pl-pds">"</span>800px<span class="pl-pds">"</span></span> <span class="pl-e">height</span>=<span class="pl-s"><span class="pl-pds">"</span>800px<span class="pl-pds">"</span></span> <span class="pl-e">viewBox</span>=<span class="pl-s"><span class="pl-pds">"</span>0 0 400 400<span class="pl-pds">"</span></span> <span class="pl-e">xmlns</span>=<span class="pl-s"><span class="pl-pds">"</span>http://www.w3.org/2000/svg<span class="pl-pds">"</span></span> <span class="pl-e">fill</span>=<span class="pl-s"><span class="pl-pds">"</span>none<span class="pl-pds">"</span></span> <span class="pl-e">stroke</span>=<span class="pl-s"><span class="pl-pds">"</span>#000<span class="pl-pds">"</span></span> <span class="pl-e">stroke-width</span>=<span class="pl-s"><span class="pl-pds">"</span>8<span class="pl-pds">"</span></span> <span class="pl-e">stroke-linecap</span>=<span class="pl-s"><span class="pl-pds">"</span>round<span class="pl-pds">"</span></span> <span class="pl-e">stroke-linejoin</span>=<span class="pl-s"><span class="pl-pds">"</span>round<span class="pl-pds">"</span></span>&gt;</span>
<span class="line" data-line-removed=""><span class="line-number" aria-hidden="true">2</span> &lt;<span class="pl-ent">path</span> <span class="pl-e">d</span>=<span class="pl-s"><span class="pl-pds">"</span><span class="pl-k">M</span><span class="pl-c1">52.4172</span> <span class="pl-c1">129.945</span><span class="pl-k">C</span><span class="pl-c1">154.767</span> <span class="pl-c1">124.431</span> <span class="pl-c1">299.051</span> <span class="pl-c1">80.9206</span> <span class="pl-c1">362.913</span> <span class="pl-c1">182.602</span><span class="pl-k">C</span><span class="pl-c1">369.254</span> <span class="pl-c1">192.695</span> <span class="pl-c1">372.11</span> <span class="pl-c1">221.082</span> <span class="pl-c1">363.911</span> <span class="pl-c1">231.283</span><span class="pl-k">C</span><span class="pl-c1">340.825</span> <span class="pl-c1">260.002</span> <span class="pl-c1">85.1022</span> <span class="pl-c1">258.994</span> <span class="pl-c1">38.4434</span> <span class="pl-c1">258.994</span><span class="pl-pds">"</span></span>/&gt;</span>
<span class="line" data-line-removed=""><span class="line-number" aria-hidden="true">3</span> &lt;<span class="pl-ent">path</span> <span class="pl-e">d</span>=<span class="pl-s"><span class="pl-pds">"</span><span class="pl-k">M</span><span class="pl-c1">371.656</span> <span class="pl-c1">279.262</span><span class="pl-k">C</span><span class="pl-c1">260.686</span> <span class="pl-c1">278.71</span> <span class="pl-c1">142.19</span> <span class="pl-c1">286.441</span> <span class="pl-c1">33.0469</span> <span class="pl-c1">281.78</span><span class="pl-pds">"</span></span>/&gt;</span>
<span class="line" data-line-removed=""><span class="line-number" aria-hidden="true">4</span> &lt;<span class="pl-ent">path</span> <span class="pl-e">d</span>=<span class="pl-s"><span class="pl-pds">"</span><span class="pl-k">M</span><span class="pl-c1">264.29</span> <span class="pl-c1">133.538</span><span class="pl-k">C</span><span class="pl-c1">247.656</span> <span class="pl-c1">199.764</span> <span class="pl-c1">297.805</span> <span class="pl-c1">187.344</span> <span class="pl-c1">346.025</span> <span class="pl-c1">180.575</span><span class="pl-pds">"</span></span>/&gt;</span>
<span class="line" data-line-removed=""><span class="line-number" aria-hidden="true">5</span> &lt;<span class="pl-ent">path</span> <span class="pl-e">d</span>=<span class="pl-s"><span class="pl-pds">"</span><span class="pl-k">M</span><span class="pl-c1">240.21</span> <span class="pl-c1">132.188</span><span class="pl-k">C</span><span class="pl-c1">251.965</span> <span class="pl-c1">213.876</span> <span class="pl-c1">84.6787</span> <span class="pl-c1">176.294</span> <span class="pl-c1">29</span> <span class="pl-c1">190.197</span><span class="pl-pds">"</span></span>/&gt;</span>
<span class="line" data-line-removed=""><span class="line-number" aria-hidden="true">6</span> &lt;<span class="pl-ent">path</span> <span class="pl-e">d</span>=<span class="pl-s"><span class="pl-pds">"</span><span class="pl-k">M</span><span class="pl-c1">171.274</span> <span class="pl-c1">140.283</span><span class="pl-k">C</span><span class="pl-c1">166.221</span> <span class="pl-c1">155.378</span> <span class="pl-c1">170.086</span> <span class="pl-c1">170.931</span> <span class="pl-c1">170.086</span> <span class="pl-c1">186.15</span><span class="pl-pds">"</span></span>/&gt;</span>
<span class="line" data-line-removed=""><span class="line-number" aria-hidden="true">7</span> &lt;<span class="pl-ent">path</span> <span class="pl-e">d</span>=<span class="pl-s"><span class="pl-pds">"</span><span class="pl-k">M</span><span class="pl-c1">96.7925</span> <span class="pl-c1">144.33</span><span class="pl-k">C</span><span class="pl-c1">93.1231</span> <span class="pl-c1">154.511</span> <span class="pl-c1">95.5446</span> <span class="pl-c1">187.149</span> <span class="pl-c1">95.6053</span> <span class="pl-c1">187.499</span><span class="pl-pds">"</span></span>/&gt;</span>
<span class="line" data-line-added=""><span class="line-number" aria-hidden="true">8</span> &lt;<span class="pl-ent">path</span> <span class="pl-e">d</span>=<span class="pl-s"><span class="pl-pds">"</span><span class="pl-k">M</span><span class="pl-c1">52.417</span> <span class="pl-c1">129.945</span><span class="pl-k">c</span><span class="pl-c1">102.35-5.514</span> <span class="pl-c1">246.634-49.024</span> <span class="pl-c1">310.496</span> <span class="pl-c1">52.657</span> <span class="pl-c1">6.341</span> <span class="pl-c1">10.093</span> <span class="pl-c1">9.197</span> <span class="pl-c1">38.48.998</span> <span class="pl-c1">48.681-23.086</span> <span class="pl-c1">28.719-278.809</span> <span class="pl-c1">27.711-325.468</span> <span class="pl-c1">27.711</span><span class="pl-k">m</span><span class="pl-c1">333.213</span> <span class="pl-c1">20.268</span><span class="pl-k">c</span><span class="pl-c1">-110.97-.552-229.466</span> <span class="pl-c1">7.179-338.61</span> <span class="pl-c1">2.518</span><span class="pl-pds">"</span></span>/&gt;</span>
<span class="line" data-line-added=""><span class="line-number" aria-hidden="true">9</span> &lt;<span class="pl-ent">path</span> <span class="pl-e">d</span>=<span class="pl-s"><span class="pl-pds">"</span><span class="pl-k">M</span><span class="pl-c1">264.29</span> <span class="pl-c1">133.538</span><span class="pl-k">c</span><span class="pl-c1">-16.634</span> <span class="pl-c1">66.226</span> <span class="pl-c1">33.515</span> <span class="pl-c1">53.806</span> <span class="pl-c1">81.735</span> <span class="pl-c1">47.037</span><span class="pl-k">M</span><span class="pl-c1">240.21</span> <span class="pl-c1">132.188</span><span class="pl-k">C</span><span class="pl-c1">251.965</span> <span class="pl-c1">213.876</span> <span class="pl-c1">84.679</span> <span class="pl-c1">176.294</span> <span class="pl-c1">29</span> <span class="pl-c1">190.197</span><span class="pl-pds">"</span></span>/&gt;</span>
<span class="line" data-line-added=""><span class="line-number" aria-hidden="true">10</span> &lt;<span class="pl-ent">path</span> <span class="pl-e">d</span>=<span class="pl-s"><span class="pl-pds">"</span><span class="pl-k">M</span><span class="pl-c1">171.274</span> <span class="pl-c1">140.283</span><span class="pl-k">c</span><span class="pl-c1">-5.053</span> <span class="pl-c1">15.095-1.188</span> <span class="pl-c1">30.648-1.188</span> <span class="pl-c1">45.867</span><span class="pl-k">m</span><span class="pl-c1">-73.293-41.82</span><span class="pl-k">c</span><span class="pl-c1">-3.67</span> <span class="pl-c1">10.181-1.248</span> <span class="pl-c1">42.819-1.188</span> <span class="pl-c1">43.169</span><span class="pl-pds">"</span></span>/&gt;</span>
<span class="line"><span class="line-number" aria-hidden="true">11</span>&lt;/<span class="pl-ent">svg</span>&gt;</span>
<pre id="MC45ODE0NDE0" style="--hl-line-number-gutter-factor: 2; --hl-line-marker-gutter-factor: 1"><code tabindex="0"><span class="line"><span class="line-number" aria-hidden="true">1</span><span class="pl-k">export</span> <span class="pl-c1">default</span> <span class="pl-smi">defineConfig</span>({</span>
<span class="line"><span class="line-number" aria-hidden="true">2</span> test<span class="pl-k">:</span> {</span>
<span class="line"><span class="line-number" aria-hidden="true">3</span> poolOptions<span class="pl-k">:</span> {</span>
<span class="line" data-line-removed=""><span class="line-number" aria-hidden="true">4</span> threads<span class="pl-k">:</span> {</span>
<span class="line" data-line-removed=""><span class="line-number" aria-hidden="true">5</span> singleThread<span class="pl-k">:</span> <span class="pl-c1">true</span>,</span>
<span class="line" data-line-removed=""><span class="line-number" aria-hidden="true">6</span> },</span>
<span class="line" data-line-added=""><span class="line-number" aria-hidden="true">7</span> forks<span class="pl-k">:</span> {</span>
<span class="line" data-line-added=""><span class="line-number" aria-hidden="true">8</span> singleFork<span class="pl-k">:</span> <span class="pl-c1">true</span>,</span>
<span class="line" data-line-added=""><span class="line-number" aria-hidden="true">9</span> },</span>
<span class="line"><span class="line-number" aria-hidden="true">10</span> }</span>
<span class="line"><span class="line-number" aria-hidden="true">11</span> }</span>
<span class="line"><span class="line-number" aria-hidden="true">12</span>});</span>
</code></pre>
</div>
```
Expand Down
Binary file modified samples/codeblock-with-diffed-lines.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 919d61c

Please sign in to comment.