Partial line highlighting

#19 · open · 2 comments

View on GitHub ↗

kmckee

Could we add support for partial line highlighting? Suppose I had the following code block... ```csharp for(var i = 0; i<= 10; i++) { } ``` I'd like to be able to highlight just the initializer (`var i = 0;`) using something like this: ```html <p class="fragment" data-code-focus="1" data-code-focus-columns="4-13"> Commentary on initializer goes here </p> ```

Comments

kmckee

Or, perhaps the `data-code-focus` string just becomes a little more complex instead: ```html <p class="fragment" data-code-focus="1[4-13]"> Commentary on initializer goes here </p> ``` `1[4-13]` = Columns 4 thru 13 on row 1

bnjmnt4n

This seems like a useful feature - but we'll have to rework a lot of the internals and the CSS styling. Currently we just wrap each line with a `<span>`, and do minimal work on the HTML to avoid messing up highlight.js's own `<span>` tags. To enable selective highlighting of specific ranges, we'll have to figure out a clean and minimal method of detecting tags and opening them where necessary to avoid overlapping.