Complete Syntax Highlighting for Markdown It with Shiki. Inspired by 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
npm i -D shada-it
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
}
```
![image](https://private-user-images.githubusercontent.com/6563823/255499677-a5d011b4-2bf8-4fb8-ac57-ba718798ce13.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjAxNzcwNzcsIm5iZiI6MTcyMDE3Njc3NywicGF0aCI6Ii82NTYzODIzLzI1NTQ5OTY3Ny1hNWQwMTFiNC0yYmY4LTRmYjgtYWM1Ny1iYTcxODc5OGNlMTMucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDcwNSUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA3MDVUMTA1MjU3WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9OWViNzZjMTYwM2MzMWU5NGY1M2NjNzNiNzM1MDQ5ZmZhMzJmMjZjNmI0ZmM5OWFjMGVhOWUzNGM2ZmFjYjI2ZSZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.fomfyYFZEy_X-3iRIYpFgN1CS4p1nAwl3ODhPu7P0LY)
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
```
![image](https://private-user-images.githubusercontent.com/6563823/255499805-24ac0f79-32e1-4b7c-afbb-6339a7ce1104.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjAxNzcwNzcsIm5iZiI6MTcyMDE3Njc3NywicGF0aCI6Ii82NTYzODIzLzI1NTQ5OTgwNS0yNGFjMGY3OS0zMmUxLTRiN2MtYWZiYi02MzM5YTdjZTExMDQucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDcwNSUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA3MDVUMTA1MjU3WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9MjI1NTEwYWQyY2EwNGIxYmE4YmU5ZTAwODg4NjU1NGQyMjNmZDlmMGM3YTFhOGYwZjc2NmNiMWZjNzNhMWNlOSZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.GCARB60KQBrDZqFXXmOSPrnQvKVJqrW0menDzWTQ1Z0)
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
```
![image](https://private-user-images.githubusercontent.com/6563823/255499963-49565fdf-1daf-41d6-bfea-b43bc9d4c69a.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjAxNzcwNzcsIm5iZiI6MTcyMDE3Njc3NywicGF0aCI6Ii82NTYzODIzLzI1NTQ5OTk2My00OTU2NWZkZi0xZGFmLTQxZDYtYmZlYS1iNDNiYzlkNGM2OWEucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDcwNSUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA3MDVUMTA1MjU3WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9ZmIyYjlhOWJjMTQ2YWQzMmQwNjU2NzkzOWZiZmU0NDU1YTZmMWQyNGE3NjNhOThlZjVjYTk4ZDlkZjZkNTM4NSZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.lXjkax2Rr5VxqLKLcjtkh9WvIq-buMNjl51WU1FkmYY)
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
```
![image](https://private-user-images.githubusercontent.com/6563823/255500070-56e9833e-eff5-483a-b574-eaabb9402a35.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjAxNzcwNzcsIm5iZiI6MTcyMDE3Njc3NywicGF0aCI6Ii82NTYzODIzLzI1NTUwMDA3MC01NmU5ODMzZS1lZmY1LTQ4M2EtYjU3NC1lYWFiYjk0MDJhMzUucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDcwNSUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA3MDVUMTA1MjU3WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9NmU0YjZkNjViNzM4ZDkxODk4ZDFiNTk1MTk4Y2MzMTFjMDUwNjIwMTM2MjYwOWJiMTM2ODVkZTQ4NzhkZWQ4YSZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.8LX7WbNTk3oabBHmLGTWl6c2eLRaawdmkUhQVan8r-w)
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
```
![image](https://private-user-images.githubusercontent.com/6563823/255500160-1e705b60-2cf9-4477-8b96-f421412f3ad8.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjAxNzcwNzcsIm5iZiI6MTcyMDE3Njc3NywicGF0aCI6Ii82NTYzODIzLzI1NTUwMDE2MC0xZTcwNWI2MC0yY2Y5LTQ0NzctOGI5Ni1mNDIxNDEyZjNhZDgucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDcwNSUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA3MDVUMTA1MjU3WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9NTk2NGZkNzg0YjVkMTZiZTBmY2UyNTNkMDRjYzQyM2M5YzI2ZjE1NWQyNGZlM2ExYjkxMzgxOWUwOTVlMGY0ZCZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.hHEMM_5RIZXhxiPSItWaTObTdp_k6aX_bJNtmvehKBQ)
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
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
}
![image](https://private-user-images.githubusercontent.com/6563823/255500314-e3e29ed4-4588-4538-9201-6a2ec5e002b1.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjAxNzcwNzcsIm5iZiI6MTcyMDE3Njc3NywicGF0aCI6Ii82NTYzODIzLzI1NTUwMDMxNC1lM2UyOWVkNC00NTg4LTQ1MzgtOTIwMS02YTJlYzVlMDAyYjEucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDcwNSUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA3MDVUMTA1MjU3WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9OTI2OTBiM2VkNjI4OGJlM2EzMGI0NTk4MzQzMjM3MTU1ZGNhZWVjMjlhNmFiNzc2YzI4NDQ4YjQ5MDEyNDdkNSZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.fMovUodlrIfGpNepXvmBOYDphNBY0TncT6oH1CF9UZg)
The gem is available as open source under the terms of the MIT License.