https://github.com/bnjmnt4n/reveal-code-focus
A Reveal.js plugin that allows focusing on specific lines of code blocks.
https://github.com/bnjmnt4n/reveal-code-focus
code focus highlight reveal-js
Last synced: 3 months ago
JSON representation
A Reveal.js plugin that allows focusing on specific lines of code blocks.
- Host: GitHub
- URL: https://github.com/bnjmnt4n/reveal-code-focus
- Owner: bnjmnt4n
- License: mit
- Archived: true
- Created: 2015-03-13T03:52:54.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2023-06-19T14:47:14.000Z (over 2 years ago)
- Last Synced: 2024-11-08T18:54:08.566Z (11 months ago)
- Topics: code, focus, highlight, reveal-js
- Language: HTML
- Homepage: https://bnjmnt4n.github.io/reveal-code-focus/
- Size: 2.97 MB
- Stars: 112
- Watchers: 5
- Forks: 11
- Open Issues: 14
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# reveal-code-focus
**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.
A [Reveal.js](https://github.com/hakimel/reveal.js) plugin that allows focusing on specific lines of code blocks.
[View the live demo.](https://bnjmnt4n.github.io/reveal-code-focus/)
## Installation
Using [npm](https://www.npmjs.com/):
```bash
$ npm install --save reveal-code-focus
```
## Dependencies
`reveal-code-focus` must first be loaded along with [highlight.js](https://highlightjs.org/) (used for code highlighting).
```js
Reveal.initialize({
// Include other options…
dependencies: [
// Include other dependencies…
// Load highlight.js
{ src: 'path/to/highlight.pack.js' },
{
src: 'node_modules/reveal-code-focus/reveal-code-focus.js',
async: true,
callback: function() {
RevealCodeFocus();
}
}
]
});
```
*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/).
## How it works
`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.
Each line of code is wrapped in a `` 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.
## Usage
```html
// Useless comment.
alert('hi');
When this fragment is shown, the first line of code (`span.line`) will have the `"focus"` class added to it.
Another fragment. This time, both lines will now have the `"focus"` class.
```
## Styling
The 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.
```css
.line { display: block; }
.line.focus { background: yellow; }
```
You can also use a specific theme by default then switch to a different one when lines are focused on.
```css
/* use a specific highlight.js theme by default */
/* eg. solarized dark */
/* … */
.line { display: block; }
/* on focused: switch to solarized light */
.line.focus { background: #fdf6e3; color: #657b83; }
.line.focus .hljs-comment, .line.focus .hljs-quote { color: #93a1a1; }
/* … */
```
## Configuration
`reveal-code-focus` can be configured by passing in an `options` object.
```js
// Configure `reveal-code-focus`.
RevealCodeFocus({
// options
});
```
### `scrollToFocused`
`scrollToFocused` automatically scrolls the `` elements such that the lines of code to be focused on is centered. This is enabled by default.
```js
RevealCodeFocus({
scrollToFocused: false // default: true
});
```
### Multiple code blocks
For 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.
```html
```
### `data-trim`
The `data-trim` attribute can be used to indicate that code blocks should have whitespace trimmed from their front and back.
```html
.line { display: block; }
.line.focus { background: yellow; }
```
## Demo
[View the live demo.](https://bnjmnt4n.github.io/reveal-code-focus/)