Grouping by line

[Hypercubed]

I've been considering how to add line highlights similar to https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-remark-prismjs . This is what I came up with:

const refractor = require("refractor")
const rehype = require('rehype')

const code = `
(function(win) {
    console.log(win);
))(window || global);
`;

const highlightLines = [3];

const nodes = code.split('\n',)
  .map((line, index) => {
    return {
      type: 'element',
      tagName: 'span',
      properties: { className: ['line', highlightLines.includes(index) ? 'highlight' : ''] },
      children: refractor.highlight(line, 'js')
    };
  });

const html = rehype()
  .stringify({type: 'root', children: nodes})
  .toString();

Do you think this is something we could add to refractor itself?

[Hypercubed]

Here is a more complete (and working) example: https://stackblitz.com/edit/js-r2mz9b

[wooorm]

@conorhastings anything we could port over from your library to here? Seems you've worked out a few things already that I'd like to implement in refractor too, and maybe it doesn't make sense to have them in two places. What do you think?

[conorhastings]

@wooorm definitely, line handling in prism was the easier of the two, let me see if i can pull out my code and take away lowlight specific stuff

[Hypercubed]

Any luck with this? You can see my implementation here: https://github.com/swimlane/DocSPA/blob/master/projects/swimlane/docspa-core/src/lib/plugins/prisim.ts#L32

[conorhastings]

@Hypercubed sorry been super busy traveling for work, I'll compare our implementations this weekend for sure and I if think i have any worthwhile contribution here, sorry about the long delay

[Hypercubed]

No worries... I'm willing to contribute if I can.

[wooorm]

I’m not sure anymore if refractor should include this here. It could be a plugin though, working the same way as prism’s line-numbers.

I do think the core of react-syntax-highlighters line mechanism could be externalised. And it could be a HAST utility for use with refractor and inside react-syntax-highlighter. And be published as refractor-line-numbers?

I do think having the plugins work with refractor, and I’d include links to ports here!

[wooorm]

Closing as I don’t think it needs code changes here btw, but would like to chat about a plugin!

[iammarkps]

Any luck using line highlighting here?

[suin]

Here I made a utility to group refractor ASTs by lines: https://github.com/suin/refractor-group-by-lines