Comments (9)
We don't generate a sequential list of ranges - it's possible to have deeply nested scopes (a tree). Now if you wanted to walk that tree (and flatten it) to try and build something like this you may want to have a look at https://github.com/wooorm/lowlight instead which users highlight.js but provides guarantees about the output format. Or build the same on us using the same private (but stable) __emitter
API that lowlight is using.
Right now though I don't think this CSS API looks very interesting from our point of view - seems to only support single color highlighting... so I can't see why we'd do anything special in the core library to support this.
from highlight.js.
Thanks for the suggestions, I'll look into it.
Regarding to the Highlight API, I made a little demo how it would work with multiple colors.
https://codepen.io/IDontHaveAny/pen/dyLmvMB
from highlight.js.
How does the API handle nested ranges?
from highlight.js.
What do you mean on "nested ranges"? Could you show me an example?
from highlight.js.
"blah #{variable}"
That is variable, within a subst (what we call interpolation), within a string - perhaps even within a "string container" (where the ""
are inside the string container but not part of the string
itself.
And you can't just flatten there because SOME of the styling of the top-level elements might need to be inherited by the children.
from highlight.js.
If I understood correctly, your question is whether is it possible to achieve the same style with Ranges that you can manage with the Element nesting or not.
The Highlight
s (ranges) can be nested so you can accomplish the same result just like when wrapping texts into elements.
https://codepen.io/IDontHaveAny/pen/ExJEGNe
from highlight.js.
No I mean something more like a SINGLE string with multiple ranges:
const parentRange = new Range();
parentRange.setStart(parent, 2);
parentRange.setEnd(parent, 14);
const childRange = new Range();
childRange.setStart(parent, 3);
childRange.setEnd(parent, 8);
So here the child is 3-8 while the parent is 2-14, ie the child SHOULD be inside/nested in the parent. I don't understand why you need more elements at all... if you already have elements everywhere it'd easy enough to just use CSS - and avoid the highlighting API entirely.
Feel like I'm still missing something here.
from highlight.js.
This example was about to show that the ranges can be nested. I don't need to use any element if I could use the Highlight API.
const parentRange = new Range();
parentRange.setStart(parent, 2);
parentRange.setEnd(parent, 14);
const childRange = new Range();
childRange.setStart(parent, 3);
childRange.setEnd(parent, 8);
I'm not sure what you meant by the example above because the ranges are invalid if it's related to the demo.
How does the API handle nested ranges?
Regarding your question, the ranges can be nested in a single string.
I don't understand why you need more elements at all... if you already have elements everywhere it'd easy enough to just use CSS - and avoid the highlighting API entirely.
I'm currently working on a rich text editor where the user can modify the text in the code block, and the code block can strictly contain only a single text node.
Code block example:
<pre>
<code>
function example() {}
</code>
</pre>
from highlight.js.
I'm not sure what you meant by the example above because the ranges are invalid if it's related to the demo.
I'm simpying imagining them as indexing into the string...
<------ full string ---------->
" #{blah_variable_here}. "
< 2 thru 18>
<5 thru 14>
(not to any kind of scale, lol)
from highlight.js.
Related Issues (20)
- Add "jsonc" alias HOT 6
- Download from Website does not work with all/most languages selected HOT 1
- Highlighting the self variable in Python
- Main branch exhibits breaking changes when markdown-it-highlightjs is upgraded to it from 11.5.1 HOT 3
- Cannot checkout 11.9.0 tag HOT 1
- (request org repo) highlightjs-postscript
- Not possible to download a package with all languages from the website HOT 5
- (Rust) Mismatched brackets in complex attribute
- Could not find the language 'HTML, XML' HOT 1
- (Bash and Shell) There is no syntax highlighting for the two. I've seen another issue but didn't seem it got answered. HOT 8
- (ini) Unquoted string value with embedded period incorrectly highlighted HOT 2
- Cloudwatch Query Language (pschorrql) HOT 2
- [Request] Conversion/usage of Pygments theme to `higlightjs` HOT 3
- (YAML) Expand allowed characters in keys HOT 3
- Download from `highlightjs.org/download` fails if select all languages HOT 1
- (C#) `file` keyword/accessibility modifier isn't highlighted
- (C) C23's digit separators are highlighted incorrectly HOT 1
- Unnecessary output while loading the highlight.js plugin. HOT 1
- (sql) 'foreign key' and 'primary key' do not highlight 'key'. HOT 4
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from highlight.js.