Code Highlight not as expected
willin opened this issue · comments
Config:
/** @type {import('rehype-pretty-code').Options} */
const rehypePrettyCodeOptions = {
transformers: [transformerNotationDiff()],
theme: 'one-dark-pro',
onVisitTitle(node) {
console.log(node); // never print anything.
},
onVisitHighlightedLine(node) {
console.log(node); // never print anything.
},
onVisitHighlightedWord(node) {
console.log(node); // never print anything.
}
};
const config = defineConfig({
extensions: ['.svelte.md', '.md', '.svx'],
highlight: false,
rehypePlugins: [
rehypeSlug,
[rehypePrettyCode, rehypePrettyCodeOptions],
[
rehypeAutolinkHeadings,
{
behavior: 'wrap',
properties: {
className: ['anchor']
}
}
]
],
remarkPlugins: [
remarkGfm
],
smartypants: {
dashes: 'oldschool'
}
});
export default config;
//```js title="hello.js" /age/#v /name/#v /setAge/#s /setName/#s /50/#i /'Taylor'/#i
const [age, setAge] = useState(50);
const [name, setName] = useState('Taylor');
//```
outputs:
![image](https://private-user-images.githubusercontent.com/1890238/290296653-c48e5052-6f35-4ca4-a61b-f6311b1c8500.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQ0MjUyNDYsIm5iZiI6MTcyNDQyNDk0NiwicGF0aCI6Ii8xODkwMjM4LzI5MDI5NjY1My1jNDhlNTA1Mi02ZjM1LTRjYTQtYTYxYi1mNjMxMWIxYzg1MDAucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDgyMyUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA4MjNUMTQ1NTQ2WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9YTMzYWYwYThkMjNkMGQzMWQxYTJkMTdiMmE5YzZiODgwNzk0ZmU0ZGE4OThiMGE3MjFlNDVlZTIzOGQ2MDllMCZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.2_1oNNhBKB2E8C0-8BNcbiIyVbMeyXCMYgU0cIOIQA0)
<figure data-rehype-pretty-code-figure="">
<pre
style="background-color: #282c34; color: #abb2bf"
tabindex="0"
data-language="js"
data-theme="one-dark-pro"
><code data-language="js" data-theme="one-dark-pro" style="display: grid;"><span data-line=""><span style="color:#C678DD">const</span><span style="color:#ABB2BF"> [</span><span style="color:#E5C07B">age</span><span style="color:#ABB2BF">, </span><span style="color:#E5C07B">setAge</span><span style="color:#ABB2BF">] </span><span style="color:#56B6C2">=</span><span style="color:#61AFEF"> useState</span><span style="color:#ABB2BF">(</span><span style="color:#D19A66">50</span><span style="color:#ABB2BF">);</span></span>
<span data-line=""><span style="color:#C678DD">const</span><span style="color:#ABB2BF"> [</span><span style="color:#E5C07B">name</span><span style="color:#ABB2BF">, </span><span style="color:#E5C07B">setName</span><span style="color:#ABB2BF">] </span><span style="color:#56B6C2">=</span><span style="color:#61AFEF"> useState</span><span style="color:#ABB2BF">(</span><span style="color:#98C379">'Taylor'</span><span style="color:#ABB2BF">);</span></span></code></pre>
</figure>
Title and highlight info missing.
In other frameworks, like next.js
:
![image](https://private-user-images.githubusercontent.com/1890238/290294905-c3d4e62f-775e-4d9c-9520-34c3c8ad1ac1.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQ0MjUyNDYsIm5iZiI6MTcyNDQyNDk0NiwicGF0aCI6Ii8xODkwMjM4LzI5MDI5NDkwNS1jM2Q0ZTYyZi03NzVlLTRkOWMtOTUyMC0zNGMzYzhhZDFhYzEucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDgyMyUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA4MjNUMTQ1NTQ2WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9NTcwYjlhYWMxZTA5MmJmMTQ2NjJkZmRkNDQwMDk2ODYwNDBlYjA0YTYwMmRhOGZkOGMwNDJkMThjZDBiNjMxMiZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.HAGDjum_Oa-1FQIqgIi-2WgrvDfO6kD1b5sKx9wgYyM)
<div data-rehype-pretty-code-fragment="">
<div data-rehype-pretty-code-title="" data-language="js" data-theme="default">
hello.js
</div>
<pre
data-language="js"
data-theme="default"
><code data-language="js" data-theme="default"><span class="line"><span style="color: rgb(198, 120, 221);">const</span><span style="color: rgb(171, 178, 191);"> [</span><span class="word--highlighted" style="color: rgb(229, 192, 123);">age</span><span style="color: rgb(171, 178, 191);">, </span><span class="word--highlighted" style="color: rgb(229, 192, 123);">setAge</span><span style="color: rgb(171, 178, 191);">] </span><span style="color: rgb(86, 182, 194);">=</span><span style="color: rgb(171, 178, 191);"> </span><span style="color: rgb(97, 175, 239);">useState</span><span style="color: rgb(171, 178, 191);">(</span><span class="word--highlighted" style="color: rgb(209, 154, 102);">50</span><span style="color: rgb(171, 178, 191);">);</span></span>
<span class="line"><span style="color: rgb(198, 120, 221);">const</span><span style="color: rgb(171, 178, 191);"> [</span><span class="word--highlighted" style="color: rgb(229, 192, 123);">name</span><span style="color: rgb(171, 178, 191);">, </span><span class="word--highlighted" style="color: rgb(229, 192, 123);">setName</span><span style="color: rgb(171, 178, 191);">] </span><span style="color: rgb(86, 182, 194);">=</span><span style="color: rgb(171, 178, 191);"> </span><span style="color: rgb(97, 175, 239);">useState</span><span style="color: rgb(171, 178, 191);">(</span><span class="word--highlighted" style="color: rgb(152, 195, 121);">'Taylor'</span><span style="color: rgb(171, 178, 191);">);</span></span></code></pre>
</div>
block code done.
is there a way to highlight inline code?
block code done.
is there a way to highlight inline code?
It's possbile