Skip to content

Commit

Permalink
feat: support highlighting inline code
Browse files Browse the repository at this point in the history
  • Loading branch information
@naiyerasif
naiyerasif committed Jan 7, 2024
1 parent f3b3cfc commit 2f31437
Show file tree
Hide file tree
Showing 17 changed files with 350 additions and 104 deletions.
113 changes: 81 additions & 32 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
- [When should I use this?](#when-should-i-use-this)
- [Install](#install)
- [Use](#use)
- [Support for inline `code` elements](#support-for-inline-code-elements)
- [API](#api)
- [Themes](#themes)
- [Examples](#examples)
Expand Down Expand Up @@ -37,6 +38,7 @@ The following additonal features are also available:
- line highlights
- support for prompt
- captions and language information
- highlighting inline `code` elements (through a custom directive)

## Install

Expand All @@ -51,14 +53,14 @@ npm install @microflash/rehype-starry-night
In Deno, with [esm.sh](https://esm.sh/):

```js
import rehypeStarryNight from "https://esm.sh/@microflash/rehype-starry-night"
import rehypeStarryNight from "https://esm.sh/@microflash/rehype-starry-night";
```

In browsers, with [esm.sh](https://esm.sh/):

```html
<script type="module">
import rehypeStarryNight from "https://esm.sh/@microflash/rehype-starry-night?bundle"
import rehypeStarryNight from "https://esm.sh/@microflash/rehype-starry-night?bundle";
</script>
```

Expand All @@ -78,23 +80,23 @@ Say we have the following file `example.md`:
And our module `example.js` looks as follows:

```js
import { unified } from "unified"
import remarkParse from "remark-parse"
import remarkRehype from "remark-rehype"
import rehypeStringify from "rehype-stringify"
import rehypeStarryNight from "https://esm.sh/@microflash/rehype-starry-night"
import { unified } from "unified";
import remarkParse from "remark-parse";
import remarkRehype from "remark-rehype";
import rehypeStringify from "rehype-stringify";
import rehypeStarryNight from "https://esm.sh/@microflash/rehype-starry-night";

main()
main();

async function main() {
const file = await unified()
.use(remarkParse)
.use(remarkRehype, { allowDangerousHtml: true })
.use(rehypeStarryNight)
.use(rehypeStringify, { allowDangerousHtml: true })
.process(markdown)
.process(markdown);

console.log(String(file))
console.log(String(file));
}
```

Expand All @@ -117,6 +119,51 @@ Running that with `node example.js` yields:

![Syntax highlighting with Starry Night](./samples/sample-1.png)

### Support for inline `code` elements

To highlight inline `code` elements, you can import [`rehype-starry-night-inline`](./src/rehype-starry-night-inline.js) plugin. This plugin relies on a custom directive which requires importing [`remark-directive`](https://github.com/remarkjs/remark-directive) and [`remark-code-directive`](./src/remark-code-directive.js).

Say we have the following file `example.md`:

```md
To print a greeting, use :code[console.log("Hello, world!");]{syntax=js}. When executed, it prints `Hello, world!`.
```

And our module `example.js` looks as follows:

```js
import { unified } from "unified";
import remarkParse from "remark-parse";
import remarkDirective from "remark-directive";
import remarkCodeDirective from "https://esm.sh/@microflash/remark-code-directive";
import remarkRehype from "remark-rehype";
import rehypeStringify from "rehype-stringify";
import rehypeStarryNightInline from "https://esm.sh/@microflash/rehype-starry-night-inline";

main();

async function main() {
const file = await unified()
.use(remarkParse)
.use(remarkDirective)
.use(remarkCodeDirective)
.use(remarkRehype, { allowDangerousHtml: true })
.use(rehypeStarryNightInline)
.use(rehypeStringify, { allowDangerousHtml: true })
.process(markdown);

console.log(String(file));
}
```

Running that with `node example.js` yields:

```html
<p>To print a greeting, use <code data-code-lang="js"><span class="pl-en">console</span>.<span class="pl-c1">log</span>(<span class="pl-s"><span class="pl-pds">"</span>Hello, world!<span class="pl-pds">"</span></span>);</code>. When executed, it prints <code>Hello, world!</code>.</p>
```

![Highlighting inline code element](./samples/sample-2.png)

## API

The default export is `rehypeStarryNight`. The following options are available. All of them are optional.
Expand Down Expand Up @@ -184,7 +231,7 @@ The above codeblock will yield:
</div>
```

![Syntax Highlighting single line codeblock](./samples/sample-2.png)
![Syntax Highlighting single line codeblock](./samples/sample-3.png)

### Example: line numbers for multiline codeblock

Expand All @@ -208,7 +255,7 @@ The above codeblock will yield:
</div>
```

![Syntax Highlighting line numbers for multiline codeblock](./samples/sample-3.png)
![Syntax Highlighting line numbers for multiline codeblock](./samples/sample-4.png)

Line numbers are automatically padded to ensure that they are aligned properly.

Expand Down Expand Up @@ -238,7 +285,7 @@ The above codeblock will yield:
</div>
```

![Syntax Highlighting show prompts](./samples/sample-4.png)
![Syntax Highlighting show prompts](./samples/sample-5.png)

[index.css](./src/index.css) disables user-selection of prompts to make sure that when a user copies the content of a codeblock, the prompt is not copied.

Expand Down Expand Up @@ -286,7 +333,7 @@ The above codeblock will yield:
</div>
```

![Syntax Highlighting highlight lines](./samples/sample-5.png)
![Syntax Highlighting highlight lines](./samples/sample-6.png)

Refer to the documentation of [fenceparser](https://github.com/Microflash/fenceparser) to learn about the additional ways in which you can specify the information about highlighted lines.

Expand Down Expand Up @@ -319,7 +366,7 @@ The above codeblock will yield:
</div>
```

![Syntax Highlighting add a caption to a codeblock](./samples/sample-6.png)
![Syntax Highlighting add a caption to a codeblock](./samples/sample-7.png)

### Example: configure aliases

Expand All @@ -336,11 +383,11 @@ Say we have the following file `example.md`:
You can alias `xjm` to `toml` as follows with `example.js`:

```js
import { unified } from "unified"
import remarkParse from "remark-parse"
import remarkRehype from "remark-rehype"
import rehypeStringify from "rehype-stringify"
import rehypeStarryNight from "https://esm.sh/@microflash/rehype-starry-night"
import { unified } from "unified";
import remarkParse from "remark-parse";
import remarkRehype from "remark-rehype";
import rehypeStringify from "rehype-stringify";
import rehypeStarryNight from "https://esm.sh/@microflash/rehype-starry-night";

main()

Expand All @@ -350,9 +397,9 @@ async function main() {
.use(remarkRehype, { allowDangerousHtml: true })
.use(rehypeStarryNight, { aliases: { xjm: "toml" } })
.use(rehypeStringify, { allowDangerousHtml: true })
.process(markdown)
.process(markdown);

console.log(String(file))
console.log(String(file));
}
```

Expand All @@ -370,7 +417,7 @@ Running that with `node example.js` yields:
</div>
```

![Syntax Highlighting configure aliases](./samples/sample-7.png)
![Syntax Highlighting configure aliases](./samples/sample-8.png)

### Example: custom header extension

Expand All @@ -385,13 +432,13 @@ Say we have the following file `example.md`:
You can pass a custom header extension as follows with `example.js`:

```js
import { unified } from "unified"
import remarkParse from "remark-parse"
import remarkRehype from "remark-rehype"
import rehypeStringify from "rehype-stringify"
import rehypeStarryNight from "https://esm.sh/@microflash/rehype-starry-night"
import rehypeStarryNightHeaderCaptionExtension from "@microflash/rehype-starry-night/header-caption-extension"
import rehypeStarryNightHeaderLanguageExtension from "@microflash/rehype-starry-night/header-language-extension"
import { unified } from "unified";
import remarkParse from "remark-parse";
import remarkRehype from "remark-rehype";
import rehypeStringify from "rehype-stringify";
import rehypeStarryNight from "https://esm.sh/@microflash/rehype-starry-night";
import rehypeStarryNightHeaderCaptionExtension from "@microflash/rehype-starry-night/header-caption-extension";
import rehypeStarryNightHeaderLanguageExtension from "@microflash/rehype-starry-night/header-language-extension";

main()

Expand Down Expand Up @@ -419,9 +466,9 @@ async function main() {
]
})
.use(rehypeStringify, { allowDangerousHtml: true })
.process(markdown)
.process(markdown);

console.log(String(file))
console.log(String(file));
}
```

Expand All @@ -438,6 +485,8 @@ Running that with `node example.js` yields:
</div>
```

![Syntax Highlighting with custom header extension](./samples/sample-9.png)

## Related

- [`rehype-highlight`](https://github.com/rehypejs/rehype-highlight) &mdash; highlight code with [highlight.js](https://github.com/isagalaev/highlight.js) (through [lowlight](https://github.com/wooorm/lowlight))
Expand Down
12 changes: 9 additions & 3 deletions package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@microflash/rehype-starry-night",
"version": "3.2.0",
"version": "3.5.0",
"description": "rehype plugin to highlight codeblocks with Starry Night ",
"license": "MIT",
"keywords": [
Expand All @@ -24,15 +24,19 @@
".": "./src/index.js",
"./css": "./src/index.css",
"./header-caption-extension": "./src/hast-util-starry-night-header-caption-extension.js",
"./header-language-extension": "./src/hast-util-starry-night-header-language-extension.js"
"./header-language-extension": "./src/hast-util-starry-night-header-language-extension.js",
"./remark-code-directive": "./src/remark-code-directive.js",
"./rehype-starry-night-inline": "./src/rehype-starry-night-inline.js"
},
"files": [
"src/index.js",
"src/hast-util-starry-night-gutter.js",
"src/hast-util-starry-night-header.js",
"src/hast-util-starry-night-header-caption-extension.js",
"src/hast-util-starry-night-header-language-extension.js",
"src/index.css"
"src/index.css",
"src/remark-code-directive.js",
"src/rehype-starry-night-inline.js"
],
"scripts": {
"test": "ava"
Expand All @@ -41,12 +45,14 @@
"@microflash/fenceparser": "^2.6.2",
"@wooorm/starry-night": "^3.2.0",
"hast-util-to-string": "^3.0.0",
"hastscript": "^8.0.0",
"unist-util-visit": "^5.0.0"
},
"devDependencies": {
"ava": "^6.0.1",
"cheerio": "1.0.0-rc.12",
"rehype-stringify": "^10.0.0",
"remark-directive": "^3.0.0",
"remark-parse": "^11.0.0",
"remark-rehype": "^11.0.0",
"unified": "^11.0.4"
Expand Down
Loading

0 comments on commit 2f31437

Please sign in to comment.