{"id":16059602,"url":"https://github.com/maful/shada-it","last_synced_at":"2026-06-20T11:31:45.707Z","repository":{"id":183366692,"uuid":"646488964","full_name":"maful/shada-it","owner":"maful","description":"Complete Syntax Highlighting for Markdown It with Shiki","archived":false,"fork":false,"pushed_at":"2023-08-22T01:20:49.000Z","size":75,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-03-05T12:59:45.298Z","etag":null,"topics":["markdown-it-plugin","shiki","syntax-highlighting"],"latest_commit_sha":null,"homepage":"https://maful.web.id","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/maful.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"maful"}},"created_at":"2023-05-28T15:05:45.000Z","updated_at":"2023-07-24T06:37:37.000Z","dependencies_parsed_at":"2024-10-09T04:01:34.155Z","dependency_job_id":null,"html_url":"https://github.com/maful/shada-it","commit_stats":null,"previous_names":["maful/shada-it"],"tags_count":7,"template":false,"template_full_name":null,"purl":"pkg:github/maful/shada-it","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maful%2Fshada-it","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maful%2Fshada-it/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maful%2Fshada-it/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maful%2Fshada-it/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/maful","download_url":"https://codeload.github.com/maful/shada-it/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maful%2Fshada-it/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34568741,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-20T02:00:06.407Z","response_time":98,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["markdown-it-plugin","shiki","syntax-highlighting"],"created_at":"2024-10-09T04:01:25.310Z","updated_at":"2026-06-20T11:31:45.685Z","avatar_url":"https://github.com/maful.png","language":"TypeScript","funding_links":["https://github.com/sponsors/maful"],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg src=\"./.github/shada-it.png\" width=\"1280\" title=\"Social Card Ruby Phosphor Icons\"\u003e\n\u003c/p\u003e\n\n# shada-it\n\nComplete Syntax Highlighting for Markdown It with Shiki. Inspired by [markdown-it-shiki](https://github.com/antfu/markdown-it-shiki)\n\nWith `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:\n\n- `#` for Ruby\n- `\u003c%#` for ERB Ruby\n- `//` for JavaScript, TypeScript, and C++\n- `/* */` for CSS\n\nDemo: https://maful.web.id\n\n## Install\n\n```bash\nnpm i -D shada-it\n```\n\n## Usage\n\n```js\nimport MarkdownIt from 'markdown-it'\nimport ShadaIt from 'shada-it'\n\nconst md = MarkdownIt()\n\nmd.use(ShadaIt, {\n  theme: 'dracula'\n})\n```\n\nExample:\n~~~\n```ts\ninterface AttrsLineOptions {\n  lineNumber: boolean // shada:remove\n  lineNumbers: boolean // shada:add\n}\n```\n~~~\n\n\u003cimg width=\"803\" alt=\"image\" src=\"https://github.com/maful/shada-it/assets/6563823/a5d011b4-2bf8-4fb8-ac57-ba718798ce13\"\u003e\n\n### Line numbers\n\nBy default, line numbers are hidden. To display them, simply include the `{lineNumbers:true}` option in your code block.\n\n~~~\n```ruby {lineNumbers:true}\nclass Post \u003c ApplicationRecord\n  validates :title, presence: true\n  validates :body, presence: true\nend\n```\n~~~\n\n\u003cimg width=\"802\" alt=\"image\" src=\"https://github.com/maful/shada-it/assets/6563823/24ac0f79-32e1-4b7c-afbb-6339a7ce1104\"\u003e\n\n### Add lines\n\nAdding lines to your code is a breeze with `shada:add`. Just use the appropriate comment syntax for your code block.\n\n~~~\n```ruby\nclass Post \u003c ApplicationRecord\n  has_one_attached :image # shada:add\nend\n```\n~~~\n\n\u003cimg width=\"800\" alt=\"image\" src=\"https://github.com/maful/shada-it/assets/6563823/49565fdf-1daf-41d6-bfea-b43bc9d4c69a\"\u003e\n\n### Remove lines\n\nWith `shada:remove`, you can easily indicate lines that should be removed from your code block using comments.\n\n~~~\n```ruby\nclass Post \u003c ApplicationRecord\n  has_one_attached :image # shada:remove\nend\n```\n~~~\n\n\u003cimg width=\"802\" alt=\"image\" src=\"https://github.com/maful/shada-it/assets/6563823/56e9833e-eff5-483a-b574-eaabb9402a35\"\u003e\n\n### Highlight lines\n\nMake specific lines stand out by using `shada:highlight` with comment syntax tailored to your code block.\n\n~~~\n```ruby\nclass Post \u003c ApplicationRecord\n  has_one_attached :image # shada:highlight\nend\n```\n~~~\n\n\u003cimg width=\"801\" alt=\"image\" src=\"https://github.com/maful/shada-it/assets/6563823/1e705b60-2cf9-4477-8b96-f421412f3ad8\"\u003e\n\n### Focus lines\n\nNeed to draw attention to certain lines? Utilize `shada:focus` with the appropriate comment syntax for your code block.\n\n~~~\n```ruby\nclass Post \u003c ApplicationRecord\n  has_one_attached :image # shada:focus\nend\n```\n~~~\n\nLast, add these to your CSS\n\n```css\npre code.has-focus-lines .line:not(.line-focus) {\n  filter: blur(.095rem);\n  opacity: .65;\n  transition: filter .35s,opacity .35s\n}\n\npre code.has-focus-lines:hover .line:not(.line-focus) {\n  filter: blur();\n  opacity: 1\n}\n```\n\n\u003cimg width=\"802\" alt=\"image\" src=\"https://github.com/maful/shada-it/assets/6563823/e3e29ed4-4588-4538-9201-6a2ec5e002b1\"\u003e\n\n## License\n\nThe gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaful%2Fshada-it","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmaful%2Fshada-it","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaful%2Fshada-it/lists"}