{"id":13791343,"url":"https://github.com/shafayetShafee/line-highlight","last_synced_at":"2025-05-12T10:31:36.358Z","repository":{"id":145217062,"uuid":"586056664","full_name":"shafayetShafee/line-highlight","owner":"shafayetShafee","description":"Quarto Extension to implement code line highlighting for HTML documents","archived":false,"fork":false,"pushed_at":"2024-01-12T21:31:35.000Z","size":1471,"stargazers_count":47,"open_issues_count":3,"forks_count":2,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-11-18T05:38:53.295Z","etag":null,"topics":["highlighting","lua-filters","pandoc-filter","quarto","quarto-extension","quarto-filter","quarto-pub","quartopub"],"latest_commit_sha":null,"homepage":"https://shafayetshafee.github.io/line-highlight/example.html","language":"Lua","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/shafayetShafee.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"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}},"created_at":"2023-01-06T20:30:19.000Z","updated_at":"2024-10-03T22:01:21.000Z","dependencies_parsed_at":"2024-11-18T05:33:05.647Z","dependency_job_id":"9de518c1-27ab-45b8-aca8-37a0640975d2","html_url":"https://github.com/shafayetShafee/line-highlight","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shafayetShafee%2Fline-highlight","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shafayetShafee%2Fline-highlight/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shafayetShafee%2Fline-highlight/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shafayetShafee%2Fline-highlight/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/shafayetShafee","download_url":"https://codeload.github.com/shafayetShafee/line-highlight/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253719951,"owners_count":21952929,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["highlighting","lua-filters","pandoc-filter","quarto","quarto-extension","quarto-filter","quarto-pub","quartopub"],"created_at":"2024-08-03T22:00:59.096Z","updated_at":"2025-05-12T10:31:35.958Z","avatar_url":"https://github.com/shafayetShafee.png","language":"Lua","funding_links":[],"categories":["Extensions"],"sub_categories":[],"readme":"# Line-highlight Extension For Quarto\n\nQuarto Extension to enable source code line highlighting and output line highlighting for HTML documents (`format: html`) similar to how [`code-line-numbers`](https://quarto.org/docs/reference/formats/html.html#code) works for RevealJs output.\n\n## Installing\n\n```bash\nquarto add shafayetShafee/line-highlight\n```\n\nThis will install the extension under the `_extensions` subdirectory.\nIf you're using version control, you will want to check in this directory.\n\n**Please Note that, this filter extension requires Quarto v1.2 at least to work.**\n\n## Using\n\nOnce installed, using this filter is easy. Simply add the following in your document yaml,\n\n```\n---\ntitle: \"Code Line Highlight in html\"\nformat: html\nfilters:\n  - line-highlight\n---\n```\n\nIt seems `line-highlight` filter does not works for code chunks within the [`Callout Blocks`](https://quarto.org/docs/authoring/callouts.html) or [`Tabsets`](https://quarto.org/docs/output-formats/html-basics.html#tabsets), if used as above (See [`#15`](https://github.com/shafayetShafee/line-highlight/issues/15#issuecomment-1520664357) for details). To get `line-highlight` working for code chunks within the callout blocks or tabset panels, run the `line-highlight` filter after the `quarto` filter as follows,\n\n\n```\n---\ntitle: \"Code Line Highlight in html\"\nformat: html\nfilters:\n  - quarto\n  - line-highlight\n---\n```\n\n\n### Highlighting Source Line Numbers\n\n#### Example 01\n\nSuppose we want to highlight the second line of a code chunk, to do that, we simply need to use the chunk option, `source-line-numbers: \"2\"` for that chunk.\n\n~~~\n---\ntitle: \"line highlighting\"\nformat: html\nfilters:\n  - line-highlight\n---\n\n```{r}\n#| source-line-numbers: \"2\"\n\niris |\u003e \n  head(5)\n```\n~~~\n\n\u003cimg src=\"example-images/line-highlight01.png\" alt=\"Example-01\" width=\"600\" /\u003e\n\n#### Example 02 (with source code line number)\n\nAlso, having the source code line numbered in such case would be helpful. We can do that by using source class `numberLines` (i.e. `#| class-source: \"numberLines\"`).\n\nHere we have highlighted line number 2 and 6 to 7 and have also enabled source code line numbering using `numberLines` source-class.\n\n~~~\n---\ntitle: \"line highlighting\"\nformat: html\nfilters:\n  - line-highlight\n---\n\n```{r}\n#| message: false\n#| class-source: \"numberLines\"\n#| source-line-numbers: \"2,6-7\"\n\n# library call\nlibrary(dplyr)\n\n# code\niris |\u003e \n  group_by(Species) |\u003e \n  summarize(mean(Sepal.Length))\n```\n~~~\n\n\u003cimg src=\"example-images/line-highlight02.png\" alt=\"Example-02\" width=\"600\" /\u003e\n\n\n### Highlighting on markdown formatted codeblocks\n\nHighlighting will also works on syntactically formatted markdown code blocks (non-executable)(e.g. `{.r}`, `{.python}`, `{.julia}` etc)\n\nUse `source-line-numbers` as code-block attributes (i.e. \\\u003cattribute-name\\\u003e=\\\u003cvalue\\\u003e),\n\n\n```{.r source-line-numbers=\"1,4\"}\nlibrary(dplyr)\n\niris |\u003e \n  group_by(Species) |\u003e \n  summarize(mean(Sepal.Length))\n```\n\nTo get line numbers, use the `.numberLines` class additionally on the code-block,\n\n\n```{.python .numberLines source-line-numbers=\"3-4\"}\nprint(\"Hello world\")\n\nfor name in [\"Sam\", \"Jake\"]:\n    print(f\"Hello {name}!\")\n```\n\n\u003cimg src=\"example-images/line-highlight04.png\" alt=\"Highlighting on markdown formatted codeblocks\" width=\"600\" /\u003e\n\nFor details, [see here](https://shafayetshafee.github.io/line-highlight/example.html#highlighting-on-markdown-formatted-codeblocks).\n\n\n## Using Highlight Marker instead of line numbers (Added in Version 1.2.0)\n\nIt is also possible to mark a line to be highlighted in the code chunk using the highlight directive  `#\u003c\u003c` at the end of the line to be highlighted. Note the syntax for the highlight directive, it starts with `#` (which is the commenting character for `r`, `python` and `julia` code chunk), followed by two `\u003c` sign.\n\n```{r}\niris |\u003e #\u003c\u003c\n  head(5) \n```\n\n\u003cimg src=\"example-images/line-highlight05.png\" width=\"600\" /\u003e\n\nAnd if both the `source-line-numbers` chunk option and highlight directive is used in a code chunk, only the lines with highlight-directive `#\u003c\u003c` will be highlighted and `source-line-numbers` will not have any effect.\n\n```{r}\n#| source-line-numbers: \"2\"\niris |\u003e #\u003c\u003c\n  head(5)\n```\n\n\u003cimg src=\"example-images/line-highlight05.png\" width=\"600\" /\u003e\n\n**Now `#\u003c\u003c` will work as a valid highlight directive only for `r`, `python`, `julia` code chunk, since `#` is a commenting character in these languages.** But what if we want to highlight line in `mermaid` or `dot` code chunk. For that, `#\u003c\u003c` will not work and syntax error will be issued. Instead, we need to use these language specific commenting characters.\n\nBut this extension uses `#\u003c\u003c` as a highlight directive by default. To use different syntax for highlight directive for a code chunk, use chunk option `ht-pattern` to specify the highlight directive to be used for that code chunk, where the syntax should be `\u003clanguage-specific-commenting-character\u003e\u003c\u003c`. \n\nTherefore, for `mermaid` cell, `ht-pattern` should be `%%\u003c\u003c` and for `dot` cell, `ht-pattern` should be `//\u003c\u003c`. Then use these to mark a code line to be highlighted.\n\n```{mermaid}\n%%| echo: true\n%%| ht-pattern: \"%%\u003c\u003c\"\nflowchart LR\n  A[Hard edge] --\u003e B(Round edge)\n  B --\u003e C{Decision}\n  C --\u003e D[Result one] %%\u003c\u003c\n  C --\u003e E[Result two]\n```\n\n\u003cimg src=\"example-images/line-highlight06.png\" width=\"600\" /\u003e\n\n\n```{dot}\n//| echo: true\n//| ht-pattern: \"//\u003c\u003c\"\ngraph G {\n  layout=neato\n  run -- intr;\n  intr -- runbl;\n  runbl -- run;\n  run -- kernel;\n  kernel -- zombie;\n  kernel -- sleep;\n  kernel -- runmem; //\u003c\u003c\n  sleep -- swap;\n  swap -- runswap;\n  runswap -- new;\n  runswap -- runmem;\n  new -- runmem; //\u003c\u003c\n  sleep -- runmem;\n}\n```\n\n\u003cimg src=\"example-images/line-highlight07.png\" width=\"600\" /\u003e\n\nIt is also possible to use `#\u003c\u003c` to highlight lines in syntactically formatted markdown code blocks,\n\n```{.r}\nlibrary(dplyr)\n\niris |\u003e #\u003c\u003c\n  group_by(Species) |\u003e \n  summarize(mean(Sepal.Length)) #\u003c\u003c\n```\n\n\n```{.python .numberLines}\nprint(\"Hello world\")\n\nfor name in [\"Sam\", \"Jake\"]: #\u003c\u003c\n    print(f\"Hello {name}!\")\n```\n\n\u003cimg src=\"example-images/line-highlight08.png\" width=\"600\" /\u003e\n\n### Highlighting Output Line Numbers\n\nHighlighting output line numbers a bit tricky. To enable output line number highlighting, we need to use both output class `highlight` and `numberLines` along with `output-line-numbers`.\n\n\n#### Example\n\nSo to highlight second line of output, we use `output-line-numbers: \"2\"` and `class-output: \"highlight numberLines\"` (Sorry couldn't make it any more easier :D :p).\n\n~~~\n---\ntitle: \"line highlighting\"\nformat: html\nfilters:\n  - line-highlight\n---\n\n```{r}\n#| message: false\n#| source-line-numbers: \"1,4\"\n#| class-output: \"highlight numberLines\"\n#| output-line-numbers: \"2\"\n\nlibrary(dplyr)\n\nmtcars |\u003e \n  summarize(\n    avg_mpg = mean(mpg)\n  )\n```\n~~~\n\n\u003cimg src=\"example-images/line-highlight03.png\" alt=\"Example\" width=\"600\" /\u003e\n\n\nFor a complete compilable `qmd` file with these example,\n\n- The source code: [example.qmd](example.qmd) \n- The rendered HTML document [example.html](https://shafayetshafee.github.io/line-highlight/example.html)\n\n\n## Acknowledgement\n\nThe javascript code and css for implementing ling highlighting is taken (modified and reduced) from the [Quarto Github Repo](https://github.com/quarto-dev/quarto-cli/tree/main/src/resources/formats/revealjs/plugins/line-highlight).","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FshafayetShafee%2Fline-highlight","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FshafayetShafee%2Fline-highlight","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FshafayetShafee%2Fline-highlight/lists"}