Comments (11)
Would love to see this : )
from shiki.
Use cases. Applying these effects for a list of ranges. No range that spans multi line.
- Use italic for a specific range
- Use underline for a specific range
- Mark a range as link
- Give a range a background color
I'm thinking along these lines:
```js [[line | text or range | style]]
console.log('shiki');
```
- Line: A 0-based line number
- Text: The text to match. For example,
log
. - Range: Start-End. For example,
log
is 8-11. Use this iftext
is ambiguous. - Style:
i
: italicu
: underlinehttp(s?)://example.org
. If the style begins withhttp://
orhttps://
, apply link effect, which shows underline on hover and open URL in new tab if clicked#aabbcc
. If the style begins with#
, parse it as color.
So it could look like:
```js [[0 | log | #ff7B08], [0 | 7-8 | u], [0 | 'shiki' | https://shiki.matsu.io/]]
console.log('shiki');
```
What do you think, @Atinux?
Also @ulivz I'd appreciate it a lot if you can give some feedback since you are leading Vuepress development now. Think Shiki is already better than highlightjs / prism and I'd want to make it a good highlighter for Vuepress too 😉
from shiki.
I wonder if we make the highlighting API be consistent with gatsby-remark-prismjs - https://github.com/andrewbranch/gatsby-remark-vscode#line-highlighting
from shiki.
For shiki-twoslash, I ended up re-using @andrewbranch's code-fencing syntax from gatsby-vscode-remark
from shiki.
I would suggest the core should not have an opinion on how code-fence meta string should be handled. Instead, allowing transformers to provide their own handling
from shiki.
Hi, are there currently any plans to actually implement this feature ?
from shiki.
I wanted to gather some feedback before proceeding, because @Atinux asked for this. But it seems he is busy. I'll ask again.
from shiki.
hi @octref , any plans to bring these features in? They look amazing
from shiki.
Thinking about something like this API below. How each markdown parser would like to integrate with the API is up to them.
@EldoranDev @jlkiri @stefanprobst @Enter-tainer I see each of you have written a remark + shiki plugin — would the API below enable you do what https://github.com/andrewbranch/gatsby-remark-vscode is doing?
interface BaseLineDecoration {
/**
* The line to apply decoration to.
* Line is 0 based.
*/
line: number
}
/**
* Render line with specified background color
*/
export interface LineBgColorDecoration extends BaseLineDecoration {
/**
* 3/6/8 digit hex code like `#fff` or color like `cadetblue`.
*/
bgColor: string
}
/**
* Render line with line number
*/
export interface LineNumberDecoration extends BaseLineDecoration {
/**
* Line number such as `1` or `01`
*/
lineNumber: string
}
/**
* A decoration applied to a line
*/
export type LineDecoration = LineBgColorDecoration | LineNumberDecoration
interface BaseTokensDecoration {
/**
* The range that includes all tokens. Only tokens that fully
* fall into the range will be matched.
* Multi-line is not supported.
* Line is 0 based.
* `startIndex` is inclusive and `endIndex` not inclusive.
*/
range: {
line: number
startIndex: number
endIndex: number
}
}
/**
* Render matched tokens with `<a>` tag
*
* Cannot overlap with other link decorations.
*/
export interface TokensLinkDecoration extends BaseTokensDecoration {
/**
* `href` value of the link
*/
link: string
}
/**
* Render matched tokens with specified font style
*/
export interface TokensFontStyleDecoration extends BaseTokensDecoration {
/**
* The font style
*/
fontStyle: FontStyle
}
/**
* Render matched tokens with specified background color
*/
export interface TokensBgColorDecoration extends BaseTokensDecoration {
/**
* 3/6/8 digit hex code like `#fff` or color like `cadetblue`.
*/
bgColor: string
}
/**
* A decoration applied to tokens in the matched range
*/
export type TokensDecoration =
| TokensLinkDecoration
| TokensFontStyleDecoration
| TokensBgColorDecoration
export interface HtmlRendererOptions {
langId?: string
fg?: string
bg?: string
/**
* Decorations applied to lines
*/
lineDecorations?: LineDecoration[]
/**
* Decorations applied to tokens
*/
tokensDecorations?: TokensDecoration[]
}
from shiki.
@octref I haven't touched remark
for a long time. If there is a way to get lines I want to highlight from remark
, then yes, I would use that information for each code block and pass it to something like highlighter.codeToHtml
(not to getHighlighter
because it would then apply to every code block)
from shiki.
Can't we potentially solve this via #380?
from shiki.
Related Issues (20)
- `@shikijs/vitepress-twoslash`: Use twoslash in the case of using imported code snippets.
- Row of `language-*` on a single `code` element HOT 1
- Vue 当没有写 `template` 时无法正常高亮 HOT 1
- @shikijs/markdown-it: code block is wrong when entering a non-existent language HOT 2
- Twoslash node query blocks (^?) no longer display on separate lines since 0.x
- `remove-notation-escape`: notation escape syntax’s normalize transformer HOT 2
- Rehype: default language
- "TypeError: onigBinding.UTF8ToString is not a function" after some time / parallel requests in Next.js HOT 10
- Inconsistent behavior between `@shikijs/twoslash` and `@shikijs/vitepress-twoslash`
- Diff syntax highlighting doesn't work with css variables theme
- `light-dark()` CSS function for dual themes HOT 3
- how to use codeToHtml + transformer (meta) ? HOT 5
- Detect Notation Transformers dynamically
- Properly disposing of highlighters HOT 1
- Describe the bug here HOT 2
- `@shikijs/rehype`: support `langAlias` options
- Optimization suggestions for the 'hast' type in Shiki.js HOT 2
- `@shikijs/rehype` - "30 instances have been created" HOT 6
- Return the grammar state after tokenizing HOT 2
- shiki/wasm dependency not found HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from shiki.