Add line highlighting to embed

MatiasFMolinari · November 22, 2018, 12:51pm

I’m really enjoying the embed feature.

It’d be a nice addition if we could pass a comma separated list of line numbers to highlight.

“https://glitch.com/embed/#!/embed/peaceful-missile?path=src/index.html&highlights=10,11,12 <— like this”

Here’s an example implementation using CodeMirror:

CompuIves/codesandbox-client/blob/52f78d6716a25de978e8b33fea2fc3b250297a39/packages/app/src/app/components/CodeEditor/CodeMirror/index.js#L28-L35


const highlightLines = (
cm: typeof CodeMirror,
highlightedLines: Array<number>
) => {
highlightedLines.forEach(line => {
  cm.addLineClass(+line - 1, 'background', 'cm-line-highlight');
});
};

Gareth · November 22, 2018, 12:54pm

Great suggestion, thanks Matias.

chroventer · November 22, 2018, 3:28pm

Is it implanted in Glitch yet?

cori · January 22, 2019, 4:49pm

Hey folks, this has been implemented in embeds now!

The help article describing customizing embeds has been updated, but in short, add a comma-separated list of lines to highlight to the highlights url parameter: &highlights=2,4,6,8 will highlight lines 2, 4, 6, and 8 of the selected source file.

Happy Glitching!

Topic		Replies	Views
Other languages Glitch Feature Ideas	1	402	December 12, 2018
Enhanced Glitch: Extra features without the Valve-Time wait The Gallery editor	1	450	July 24, 2019
Executable Code Snippets Glitch Feature Ideas	4	1311	January 16, 2025
CodeMirror Emmet plugin Glitch Feature Ideas editor	2	692	May 4, 2020
Svelte Syntax Highlighting & Formatting Glitch Feature Ideas editor , javascript	14	2897	February 18, 2022

Add line highlighting to embed

Related topics