{"id":13831795,"url":"https://github.com/bnjmnt4n/reveal-code-focus","last_synced_at":"2025-12-12T04:20:58.532Z","repository":{"id":28608400,"uuid":"32126854","full_name":"bnjmnt4n/reveal-code-focus","owner":"bnjmnt4n","description":"A Reveal.js plugin that allows focusing on specific lines of code blocks.","archived":true,"fork":false,"pushed_at":"2023-06-19T14:47:14.000Z","size":3113,"stargazers_count":112,"open_issues_count":14,"forks_count":11,"subscribers_count":5,"default_branch":"master","last_synced_at":"2024-11-08T18:54:08.566Z","etag":null,"topics":["code","focus","highlight","reveal-js"],"latest_commit_sha":null,"homepage":"https://bnjmnt4n.github.io/reveal-code-focus/","language":"HTML","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/bnjmnt4n.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2015-03-13T03:52:54.000Z","updated_at":"2024-05-12T21:46:30.000Z","dependencies_parsed_at":"2023-07-13T15:48:04.047Z","dependency_job_id":null,"html_url":"https://github.com/bnjmnt4n/reveal-code-focus","commit_stats":{"total_commits":59,"total_committers":6,"mean_commits":9.833333333333334,"dds":"0.15254237288135597","last_synced_commit":"176fe020084391349c906dfba0debf6852dad87d"},"previous_names":["demoneaux/reveal-code-focus"],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bnjmnt4n%2Freveal-code-focus","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bnjmnt4n%2Freveal-code-focus/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bnjmnt4n%2Freveal-code-focus/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bnjmnt4n%2Freveal-code-focus/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bnjmnt4n","download_url":"https://codeload.github.com/bnjmnt4n/reveal-code-focus/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225565927,"owners_count":17489287,"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":["code","focus","highlight","reveal-js"],"created_at":"2024-08-04T10:01:40.224Z","updated_at":"2025-12-12T04:20:58.489Z","avatar_url":"https://github.com/bnjmnt4n.png","language":"HTML","funding_links":[],"categories":["HTML"],"sub_categories":[],"readme":"# reveal-code-focus\n\n**Notice: This plugin is deprecated.** [Reveal.js v4](https://github.com/hakimel/reveal.js/releases/tag/4.0.0) contains many improvements to [code blocks](https://revealjs.com/code/), which when coupled with the [Auto-Animate](https://revealjs.com/auto-animate/) feature, can replicate the functionality of this plugin.\n\nA [Reveal.js](https://github.com/hakimel/reveal.js) plugin that allows focusing on specific lines of code blocks.\n\n[View the live demo.](https://bnjmnt4n.github.io/reveal-code-focus/)\n\n## Installation\n\nUsing [npm](https://www.npmjs.com/):\n\n```bash\n$ npm install --save reveal-code-focus\n```\n\n## Dependencies\n\n`reveal-code-focus` must first be loaded along with [highlight.js](https://highlightjs.org/) (used for code highlighting).\n\n```js\nReveal.initialize({\n  // Include other options…\n  dependencies: [\n    // Include other dependencies…\n    // Load highlight.js\n    { src: 'path/to/highlight.pack.js' },\n    {\n      src: 'node_modules/reveal-code-focus/reveal-code-focus.js',\n      async: true,\n      callback: function() {\n        RevealCodeFocus();\n      }\n    }\n  ]\n});\n```\n\n*Note:* the `highlight.js` file mentioned is not the [Reveal.js plugin](https://github.com/hakimel/reveal.js/blob/master/plugin/highlight/highlight.js), but the actual [highlight.js library](https://highlightjs.org/).\n\n## How it works\n\n`reveal-code-focus` breaks down code blocks into individual lines. Fragments with the attribute `data-code-focus` are then associated with the lines of code to focus on. When these fragments are displayed, `reveal-code-focus` will focus on the respective lines of code.\n\nEach line of code is wrapped in a `\u003cspan\u003e` element with a class of `\"line\"`. When lines are focused on, they will also have the `\"focus\"` class. The `.line.focus` selector can thus be used for custom styling to highlight particular lines.\n\n## Usage\n\n```html\n\u003csection\u003e\n  \u003cpre\u003e\u003ccode\u003e\n  // Useless comment.\n  alert('hi');\n  \u003c/pre\u003e\u003c/code\u003e\n  \u003cp class=\"fragment\" data-code-focus=\"1\"\u003e\n    When this fragment is shown, the first line of code (`span.line`) will have the `\"focus\"` class added to it.\n  \u003c/p\u003e\n  \u003cp class=\"fragment\" data-code-focus=\"1-2\"\u003e\n    Another fragment. This time, both lines will now have the `\"focus\"` class.\n  \u003c/p\u003e\n\u003c/section\u003e\n```\n\n## Styling\n\nThe most important style is to ensure that `.line` is set to `display: block`, so that lines will be rendered as block elements. You can then customize your CSS to set a different background or text colour when lines are focused on.\n\n```css\n.line { display: block; }\n.line.focus { background: yellow; }\n```\n\nYou can also use a specific theme by default then switch to a different one when lines are focused on.\n\n```css\n/* use a specific highlight.js theme by default */\n/* eg. solarized dark */\n/* … */\n\n.line { display: block; }\n/* on focused: switch to solarized light */\n.line.focus { background: #fdf6e3; color: #657b83; }\n.line.focus .hljs-comment, .line.focus .hljs-quote { color: #93a1a1; }\n/* … */\n```\n\n## Configuration\n\n`reveal-code-focus` can be configured by passing in an `options` object.\n\n```js\n// Configure `reveal-code-focus`.\nRevealCodeFocus({\n  // options\n});\n```\n\n### `scrollToFocused`\n\n`scrollToFocused` automatically scrolls the `\u003ccode\u003e` elements such that the lines of code to be focused on is centered. This is enabled by default.\n\n\n```js\nRevealCodeFocus({\n  scrollToFocused: false // default: true\n});\n```\n\n### Multiple code blocks\n\nFor slides with multiple code blocks, the `data-code-block` attribute can be used to focus on lines from a particular code block. By default, all fragments will focus on the first code block, unless otherwise specified.\n\n```html\n\u003cspan class=\"fragment\"\n  data-code-focus=\"1-5\"\n  data-code-block=\"2\"\u003e\n\u003c/span\u003e\n```\n\n### `data-trim`\n\nThe `data-trim` attribute can be used to indicate that code blocks should have whitespace trimmed from their front and back.\n\n\n```html\n\u003cpre\u003e\u003ccode data-trim\u003e\n\n.line { display: block; }\n.line.focus { background: yellow; }\n\n\u003c/code\u003e\u003c/pre\u003e\n```\n\n## Demo\n\n[View the live demo.](https://bnjmnt4n.github.io/reveal-code-focus/)\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbnjmnt4n%2Freveal-code-focus","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbnjmnt4n%2Freveal-code-focus","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbnjmnt4n%2Freveal-code-focus/lists"}