Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/maful/shada-it
Complete Syntax Highlighting for Markdown It with Shiki
https://github.com/maful/shada-it
markdown-it-plugin shiki syntax-highlighting
Last synced: 7 days ago
JSON representation
Complete Syntax Highlighting for Markdown It with Shiki
- Host: GitHub
- URL: https://github.com/maful/shada-it
- Owner: maful
- License: mit
- Created: 2023-05-28T15:05:45.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2023-08-22T01:20:49.000Z (about 1 year ago)
- Last Synced: 2024-10-29T14:45:32.221Z (18 days ago)
- Topics: markdown-it-plugin, shiki, syntax-highlighting
- Language: TypeScript
- Homepage: https://maful.web.id
- Size: 73.2 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# shada-it
Complete Syntax Highlighting for Markdown It with Shiki. Inspired by [markdown-it-shiki](https://github.com/antfu/markdown-it-shiki)
With `shada-it`, you can effortlessly manage your code blocks using simple comments with the `shada:{remove,add,highlight,focus}` syntax. It's compatible with various single-line comment styles, including:
- `#` for Ruby
- `<%#` for ERB Ruby
- `//` for JavaScript, TypeScript, and C++
- `/* */` for CSS
Demo: https://maful.web.id
## Install
```bash
npm i -D shada-it
```
## Usage
```js
import MarkdownIt from 'markdown-it'
import ShadaIt from 'shada-it'
const md = MarkdownIt()
md.use(ShadaIt, {
theme: 'dracula'
})
```
Example:
~~~
```ts
interface AttrsLineOptions {
lineNumber: boolean // shada:remove
lineNumbers: boolean // shada:add
}
```
~~~
### Line numbers
By default, line numbers are hidden. To display them, simply include the `{lineNumbers:true}` option in your code block.
~~~
```ruby {lineNumbers:true}
class Post < ApplicationRecord
validates :title, presence: true
validates :body, presence: true
end
```
~~~
### Add lines
Adding lines to your code is a breeze with `shada:add`. Just use the appropriate comment syntax for your code block.
~~~
```ruby
class Post < ApplicationRecord
has_one_attached :image # shada:add
end
```
~~~
### Remove lines
With `shada:remove`, you can easily indicate lines that should be removed from your code block using comments.
~~~
```ruby
class Post < ApplicationRecord
has_one_attached :image # shada:remove
end
```
~~~
### Highlight lines
Make specific lines stand out by using `shada:highlight` with comment syntax tailored to your code block.
~~~
```ruby
class Post < ApplicationRecord
has_one_attached :image # shada:highlight
end
```
~~~
### Focus lines
Need to draw attention to certain lines? Utilize `shada:focus` with the appropriate comment syntax for your code block.
~~~
```ruby
class Post < ApplicationRecord
has_one_attached :image # shada:focus
end
```
~~~
Last, add these to your CSS
```css
pre code.has-focus-lines .line:not(.line-focus) {
filter: blur(.095rem);
opacity: .65;
transition: filter .35s,opacity .35s
}
pre code.has-focus-lines:hover .line:not(.line-focus) {
filter: blur();
opacity: 1
}
```
## License
The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).