From 133fb413cac23aa4ce2268c8e9765e2334322b81 Mon Sep 17 00:00:00 2001 From: Naiyer <19614213+naiyerasif@users.noreply.github.com> Date: Sun, 7 Jul 2024 22:31:51 +0530 Subject: [PATCH] feat: rename sample images --- README.md | 32 +++++++++--------- ...odeblock-rendered-using-custom-plugin.png} | Bin ...ered-using-default-and-custom-plugins.png} | Bin ...=> codeblock-rendered-without-plugins.png} | Bin ...ng => codeblock-with-aliased-language.png} | Bin ...-9.png => codeblock-with-diffed-lines.png} | Bin ...g => codeblock-with-highlighted-lines.png} | Bin ....png => codeblock-with-multiple-lines.png} | Bin ...ample-6.png => codeblock-with-prompts.png} | Bin ...e-3.png => codeblock-with-single-line.png} | Bin ...{sample-5.png => codeblock-with-title.png} | Bin ...ng => codeblock-with-unknown-language.png} | Bin ...7.png => codeblock-with-wrapped-lines.png} | Bin ...ng => codeblock-without-language-info.png} | Bin samples/{sample-1.png => general-usage.png} | Bin ... => inline-code-without-language-info.png} | Bin samples/{sample-2.png => inline-code.png} | Bin 17 files changed, 16 insertions(+), 16 deletions(-) rename samples/{sample-11.png => codeblock-rendered-using-custom-plugin.png} (100%) rename samples/{sample-12.png => codeblock-rendered-using-default-and-custom-plugins.png} (100%) rename samples/{sample-13.png => codeblock-rendered-without-plugins.png} (100%) rename samples/{sample-10.png => codeblock-with-aliased-language.png} (100%) rename samples/{sample-9.png => codeblock-with-diffed-lines.png} (100%) rename samples/{sample-8.png => codeblock-with-highlighted-lines.png} (100%) rename samples/{sample-4.png => codeblock-with-multiple-lines.png} (100%) rename samples/{sample-6.png => codeblock-with-prompts.png} (100%) rename samples/{sample-3.png => codeblock-with-single-line.png} (100%) rename samples/{sample-5.png => codeblock-with-title.png} (100%) rename samples/{sample-14.png => codeblock-with-unknown-language.png} (100%) rename samples/{sample-7.png => codeblock-with-wrapped-lines.png} (100%) rename samples/{sample-15.png => codeblock-without-language-info.png} (100%) rename samples/{sample-1.png => general-usage.png} (100%) rename samples/{sample-16.png => inline-code-without-language-info.png} (100%) rename samples/{sample-2.png => inline-code.png} (100%) diff --git a/README.md b/README.md index 1d5fef5..c23ad65 100644 --- a/README.md +++ b/README.md @@ -132,7 +132,7 @@ Running that with `node example.js` yields: ``` -![Syntax highlighting with Rehype Starry Night](./samples/sample-1.png) +![Syntax highlighting with Rehype Starry Night](./samples/general-usage.png) ### Support for inline `code` elements @@ -175,7 +175,7 @@ Running that with `node example.js` yields:

To print a greeting, use console.log("Hello, world!");. This code prints Hello, world! on the console window.

``` -![Highlighting inline code element](./samples/sample-2.png) +![Highlighting inline code element](./samples/inline-code.png) ## API @@ -318,7 +318,7 @@ The above codeblock gets rendered as: ``` -![Syntax Highlighting codeblock with single line](./samples/sample-3.png) +![Syntax Highlighting codeblock with single line](./samples/codeblock-with-single-line.png) The plugin does not add line numbers when the codeblock contains a single line. @@ -344,7 +344,7 @@ The above codeblock gets rendered as: ``` -![Syntax Highlighting codeblock with multiple lines](./samples/sample-4.png) +![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). @@ -373,7 +373,7 @@ The above codeblock gets rendered as: ``` -![Codeblock with title](./samples/sample-5.png) +![Codeblock with title](./samples/codeblock-with-title.png) ### Example: Codeblock with prompts @@ -401,7 +401,7 @@ The above codeblock gets rendered as: ``` -![Codeblock with prompts](./samples/sample-6.png) +![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). @@ -465,7 +465,7 @@ The above codeblock gets rendered as: ``` -![Syntax Highlighting codeblock with wrapped lines](./samples/sample-7.png) +![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). @@ -513,7 +513,7 @@ The above codeblock gets rendered as: ``` -![Codeblock with highlighted lines](./samples/sample-8.png) +![Codeblock with highlighted lines](./samples/codeblock-with-highlighted-lines.png) See the documentation of [`fenceparser`](https://github.com/Microflash/fenceparser) to learn about the ways in which you can specify the line range for highlighted lines. @@ -557,7 +557,7 @@ The above codeblock gets rendered as: ``` -![Codeblock with added and removed lines](./samples/sample-9.png) +![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). @@ -587,7 +587,7 @@ The above codeblock gets rendered as: ``` -![Codeblock with unknown language](./samples/sample-14.png) +![Codeblock with unknown language](./samples/codeblock-with-unknown-language.png) ### Example: Codeblock with aliased language @@ -642,7 +642,7 @@ Running that with `node example.js` yields: ``` -![Syntax Highlighting configure aliases](./samples/sample-10.png) +![Codeblock with aliased language](./samples/codeblock-with-aliased-language.png) ### Example: Codeblock rendered using custom plugin @@ -708,7 +708,7 @@ Running that with `node example.js` yields: ``` -![Codeblock rendered using custom header plugin](./samples/sample-11.png) +![Codeblock rendered using custom header plugin](./samples/codeblock-rendered-using-custom-plugin.png) ### Example: Codeblock rendered using default and custom plugins @@ -781,7 +781,7 @@ Running that with `node example.js` yields: ``` -![Codeblock rendered using default and custom plugins](./samples/sample-12.png) +![Codeblock rendered using default and custom plugins](./samples/codeblock-rendered-using-default-and-custom-plugins.png) ### Example: Codeblock rendered without plugins @@ -833,7 +833,7 @@ Running that with `node example.js` yields: ``` -![Codeblock rendered without plugins](./samples/sample-13.png) +![Codeblock rendered without plugins](./samples/codeblock-rendered-without-plugins.png) ### Example: Using custom classname prefix @@ -987,7 +987,7 @@ The above codeblock gets rendered as: ``` -![Codeblock without language info](./samples/sample-15.png) +![Codeblock without language info](./samples/codeblock-without-language-info.png) Similarly for inline `code` element without language information: @@ -1001,7 +1001,7 @@ It gets rendered as:

gleam new command will generate a new Gleam project.

``` -![Inline code without language info](./samples/sample-16.png) +![Inline code without language info](./samples/inline-code-without-language-info.png) ## Related diff --git a/samples/sample-11.png b/samples/codeblock-rendered-using-custom-plugin.png similarity index 100% rename from samples/sample-11.png rename to samples/codeblock-rendered-using-custom-plugin.png diff --git a/samples/sample-12.png b/samples/codeblock-rendered-using-default-and-custom-plugins.png similarity index 100% rename from samples/sample-12.png rename to samples/codeblock-rendered-using-default-and-custom-plugins.png diff --git a/samples/sample-13.png b/samples/codeblock-rendered-without-plugins.png similarity index 100% rename from samples/sample-13.png rename to samples/codeblock-rendered-without-plugins.png diff --git a/samples/sample-10.png b/samples/codeblock-with-aliased-language.png similarity index 100% rename from samples/sample-10.png rename to samples/codeblock-with-aliased-language.png diff --git a/samples/sample-9.png b/samples/codeblock-with-diffed-lines.png similarity index 100% rename from samples/sample-9.png rename to samples/codeblock-with-diffed-lines.png diff --git a/samples/sample-8.png b/samples/codeblock-with-highlighted-lines.png similarity index 100% rename from samples/sample-8.png rename to samples/codeblock-with-highlighted-lines.png diff --git a/samples/sample-4.png b/samples/codeblock-with-multiple-lines.png similarity index 100% rename from samples/sample-4.png rename to samples/codeblock-with-multiple-lines.png diff --git a/samples/sample-6.png b/samples/codeblock-with-prompts.png similarity index 100% rename from samples/sample-6.png rename to samples/codeblock-with-prompts.png diff --git a/samples/sample-3.png b/samples/codeblock-with-single-line.png similarity index 100% rename from samples/sample-3.png rename to samples/codeblock-with-single-line.png diff --git a/samples/sample-5.png b/samples/codeblock-with-title.png similarity index 100% rename from samples/sample-5.png rename to samples/codeblock-with-title.png diff --git a/samples/sample-14.png b/samples/codeblock-with-unknown-language.png similarity index 100% rename from samples/sample-14.png rename to samples/codeblock-with-unknown-language.png diff --git a/samples/sample-7.png b/samples/codeblock-with-wrapped-lines.png similarity index 100% rename from samples/sample-7.png rename to samples/codeblock-with-wrapped-lines.png diff --git a/samples/sample-15.png b/samples/codeblock-without-language-info.png similarity index 100% rename from samples/sample-15.png rename to samples/codeblock-without-language-info.png diff --git a/samples/sample-1.png b/samples/general-usage.png similarity index 100% rename from samples/sample-1.png rename to samples/general-usage.png diff --git a/samples/sample-16.png b/samples/inline-code-without-language-info.png similarity index 100% rename from samples/sample-16.png rename to samples/inline-code-without-language-info.png diff --git a/samples/sample-2.png b/samples/inline-code.png similarity index 100% rename from samples/sample-2.png rename to samples/inline-code.png