diff --git a/CHANGELOG.md b/CHANGELOG.md index 38db8cf..ea70d4d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,6 +5,16 @@ 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.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 @@ -129,6 +139,7 @@ Syntax highlight plugin with support for following additional features - support for prompt - captions and language information +[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 diff --git a/README.md b/README.md index c23ad65..d0413f3 100644 --- a/README.md +++ b/README.md @@ -50,7 +50,7 @@ The following additonal features are also available out of box: - line numbers - line highlights - annotations for added and removed lines -- conditionally wrapping lines +- wrapping lines - prompt character - title and language information - highlighting inline `code` elements @@ -217,6 +217,7 @@ export default { - [`lineMarkPlugin`](./src/rehype-starry-night/plugins/line-mark-plugin.js) - used to highlight a line - [`lineInsPlugin`](./src/rehype-starry-night/plugins/line-ins-plugin.js) - used to annotate an added line - [`lineDelPlugin`](./src/rehype-starry-night/plugins/line-del-plugin.js) - used to annotate a removed line +- [`lineWrapPlugin`](./src/rehype-starry-night/plugins/line-wrap-plugin.js) - used to soft wrap a line You can import these plugins individually. @@ -228,6 +229,7 @@ import lineOutputPlugin from "@microflash/rehype-starry-night/plugins/line-outpu import lineMarkPlugin from "@microflash/rehype-starry-night/plugins/line-mark-plugin"; import lineInsPlugin from "@microflash/rehype-starry-night/plugins/line-ins-plugin"; import lineDelPlugin from "@microflash/rehype-starry-night/plugins/line-del-plugin"; +import lineWrapPlugin from "@microflash/rehype-starry-night/plugins/line-wrap-plugin"; ``` Alternatively, you can import them all at once. @@ -346,7 +348,7 @@ The above codeblock gets rendered as: ![Syntax Highlighting codeblock with multiple lines](./samples/codeblock-with-multiple-lines.png) -The plugin attaches `--hl-line-number-gutter-factor` CSS property on the `pre` element when the codeblock contains multiple lines. You can use this property to pad the line numbers and align them. See [`index.css`](./src/index.css#L73). +The plugin attaches `--hl-line-number-gutter-factor` CSS property on the `pre` element when the codeblock contains multiple lines. You can use this property to pad the line numbers and align them. See [`index.css`](./src/index.css#L120). ### Example: Codeblock with title @@ -403,7 +405,7 @@ The above codeblock gets rendered as: ![Codeblock with prompts](./samples/codeblock-with-prompts.png) -You should disable the selection of prompt character so that when people copy the command, the prompt is not copied. See [`index.css`](./src/index.css#L170). +You should disable the selection of prompt character so that when people copy the command, the prompt is not copied. See [`index.css`](./src/index.css#L168). ### Example: Codeblock with command and its output @@ -435,13 +437,13 @@ The above codeblock gets rendered as: ``` -The plugin marks the output lines with `[data-unselectable]` attribute. You can set `user-select: none` for such elements using CSS. See [`index.css`](./src/index.css#L139). +The plugin marks the output lines with `[data-unselectable]` attribute. You can set `user-select: none` for such elements using CSS. See [`index.css`](./src/index.css#L138). ### Example: Codeblock with wrapped lines -Sometimes you may want to avoid scrolling a long line containing important information at the very end. In such cases, you can wrap the codeblock with `wrap="true"` property. +Sometimes you may want to avoid scrolling a long line containing important information at the very end. In such cases, you can wrap the codeblock with `wrap` property. - ```sh wrap="true" + ```sh wrap{1} # download the formula for node@20.5.1 curl -o node.rb https://raw.githubusercontent.com/Homebrew/homebrew-core/442f9cc511ce6dfe75b96b2c83749d90dde914d2/Formula/n/node.rb @@ -456,8 +458,8 @@ The above codeblock gets rendered as:
sh
-
# download the formula for node@20.5.1
-curl -o node.rb https://raw.githubusercontent.com/Homebrew/homebrew-core/442f9cc511ce6dfe75b96b2c83749d90dde914d2/Formula/n/node.rb
+
# download the formula for node@20.5.1
+curl -o node.rb https://raw.githubusercontent.com/Homebrew/homebrew-core/442f9cc511ce6dfe75b96b2c83749d90dde914d2/Formula/n/node.rb
 
 # install with the downloaded formula
 brew install node.rb
@@ -467,7 +469,7 @@ The above codeblock gets rendered as:
 
 ![Syntax Highlighting codeblock with wrapped lines](./samples/codeblock-with-wrapped-lines.png)
 
-When you set `wrap="true"`, the plugin attaches a `[data-pre-wrap]` attribute on the `pre` element. You can use CSS to set `white-space: pre-wrap` on the `code` element to enable wrapping. See [`index.css`](./src/index.css#L68).
+When you set the `wrap` property, the plugin attaches a `[data-line-wrapped]` attribute on the matching line elements. You can use CSS to set `white-space: pre-wrap` on them to enable wrapping. See [`index.css`](./src/index.css#L78).
 
 ### Example: Codeblock with highlighted lines
 
@@ -521,45 +523,48 @@ 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}
-	
-	  
-	  
-	  
-	  
-	  
-	  
-	  
-	  
-	  
-	
+	```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
-

+

   

-    
svg

+    
js

+    
Pool options in Vitest 2.0

   

-
<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>
+
export default defineConfig({
+	test: {
+		poolOptions: {
+			threads: {
+				singleThread: true,
+			},
+			forks: {
+				singleFork: true,
+			},
+		}
+	}
+});
 

 

 ```
 
 ![Codeblock with added and removed lines](./samples/codeblock-with-diffed-lines.png)
 
-The plugin attaches `--hl-line-marker-gutter-factor` CSS property on the `pre` element when you specify the codeblock line addition or removal annotations. You can use this property to pad the line numbers and align the icons. See [`index.css#L94`](./src/index.css#L94) and [`index.css#L120`](./src/index.css#L120).
+The plugin attaches `--hl-line-marker-gutter-factor` CSS property on the `pre` element when you specify the codeblock line addition or removal annotations. You can use this property to pad the line numbers and align the icons. See [`index.css`](./src/index.css#L69).
 
 See the documentation of [`fenceparser`](https://github.com/Microflash/fenceparser) to learn about the ways in which you can specify the line range for `ins` and `del` properties.
 
diff --git a/samples/codeblock-with-diffed-lines.png b/samples/codeblock-with-diffed-lines.png
index a4ec848..32bd40c 100644
Binary files a/samples/codeblock-with-diffed-lines.png and b/samples/codeblock-with-diffed-lines.png differ