Comments (10)
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.
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)
- The div.language-id element is not rendering when calling `codeToHtml` HOT 1
- Error: with Next.js app HOT 6
- Theme request: New default VS Code 'modern' themes HOT 2
- Add human-readable name to the `BUNDLED_LANGUAGES` HOT 2
- Remove the default loading of `nord` theme when `getHighlighter` HOT 3
- Cannot read properties of undefined (reading 'VSCODE_TEXTMATE_DEBUG') HOT 3
- Is it possible to disable italic? HOT 1
- Unzipped files are corrupt HOT 1
- All languages are loaded when langs is anything but empty? HOT 2
- Problem with GraphQL Syntax Highlighting HOT 1
- Optimizing Language Loading HOT 1
- Support injectInto in downloadFromMarketplace HOT 1
- Languages provided to the `highlighter.codeToHtml()` function are case-sensitive HOT 1
- Update the 0.14.2 package release to pick up new grammars? HOT 1
- Unmerged PRs for new grammar HOT 2
- Multiple grammars for the same lanuage HOT 1
- Out of Bounds memory issue when deploying to Netlify HOT 1
- Hugo website installation HOT 2
- Open issue automatically when remote grammar/theme is unavailable
- Supporting your own languages with Shiki example won't typecheck
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.