wooorm / lowlight Goto Github PK
View Code? Open in Web Editor NEWVirtual syntax highlighting for virtual DOMs and non-HTML things
License: MIT License
Virtual syntax highlighting for virtual DOMs and non-HTML things
License: MIT License
That would be nice as I tried to use { lowlight.highlight("json", {somejson}).value }
and I am getting an error
Error: Objects are not valid as a React child (found: object with keys {type, value}). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons. Check the render method of `QuickStart`.
I guess I am missing a specific initialization for React.
I want to add line numbers in code. but I have no clue how to solve this
sideEffects
filed in lowlight/package.json
is false
, and webpack will tree shake ./lib/common.js
, so those register events will not execute.
IMO, lib/common.js
and lib/all.js
are have side effects, so sideEffects
should not be false
.
this is an example, https://github.com/zzuu666/webpack-side-effects
Thanks.
When using lowlight to apply styling to Solidity, it incorrectly parses comments in certain cases. Consider the following code:
// SPDX-License-Identifier: MIT
pragma solidity ^0.8.13;
contract MetaCoin {
constructor() {
balances[tx.origin/***stuff***/] = 10000;
}
}
In particular, note the comment that comes after tx.origin
(I know, a weird place for a comment). My setup is the following:
import { unified } from "unified";
import rehypeStringify from "rehype-stringify";
import { lowlight } from "lowlight/lib/core";
import { solidity } from "highlightjs-solidity";
lowlight.registerLanguage("solidity", solidity);
const processor = unified().use(rehypeStringify);
const highlighted = lowlight.highlight("solidity", source.contents);
const finishedText = processor.stringify(highlighted);
In finishedText
you will notice that lowlight does not wrap the comment as a comment but rather skips the /
and parses the *
s as operator. However, if you put a space in the source code like tx.origin /***stuff***/
it correctly parses it as a comment.
It doesn't look like there's any way to list the registered languages. I'm using this is a web form and I want to populate a dropdown with the available languages, but there doesn't seem to be a way of getting them.
It looks like highlight.js exports this with the listLanguages
function, but since lowlight registers languages in a local variable, this function just returns an empty list.
Using rehype on the browser imports their parser, which has parse5 in the dependency tree, a 186kb (as of today) dependency that'll never be used here. It was the largest portion of my node_modules bundle (I'm using this on browser)
Since rehype is a collection of plugins, I just used the stringify plugin and chucked the parser bloat from my bundle size. I believe this should be the recommendation in the doc here.
Happy to add a PR for the doc change if you'd like.
Setting to an empty string still results in the default prefix.
I was expecting it to disable prefix completely.
So HighlightJS is no longer accepting new language support to their repo, and instead are encouraging people publishing their own 3rd party language support, I was wondering if you had any plans to support these languages?
(I am happy to PR the language support that I made if you are open to the idea)
Following this https://gitter.im/MoOx/phenomic?at=57b6202998125cfb657bc8d7
I am getting this warning.
Warning: %s Module build failed: Error: Expected `console` to be registered
at coreHighlight (/Users/moox/Sync/Development/phenomic/node_modules/lowlight/lib/core.js:354:15)
at Object.highlight (/Users/moox/Sync/Development/phenomic/node_modules/lowlight/lib/core.js:898:22)
at visitor (/Users/moox/Sync/Development/phenomic/node_modules/remark-highlight.js/dist/index.js:36:45)
at one (/Users/moox/Sync/Development/phenomic/node_modules/unist-util-visit/index.js:72:22)
at all (/Users/moox/Sync/Development/phenomic/node_modules/unist-util-visit/index.js:48:26)
at one (/Users/moox/Sync/Development/phenomic/node_modules/unist-util-visit/index.js:76:20)
at visit (/Users/moox/Sync/Development/phenomic/node_modules/unist-util-visit/index.js:82:5)
at /Users/moox/Sync/Development/phenomic/node_modules/remark-highlight.js/dist/index.js:42:45
at wrapped (/Users/moox/Sync/Development/phenomic/node_modules/trough/index.js:128:19)
at next (/Users/moox/Sync/Development/phenomic/node_modules/trough/index.js:81:24)
As you mentionned on the chat, this is likely due to "console" not being recognized.
Ref highlightjs/highlight.js#1126 (as it's not in highlight.js as well for now).
I think one improvement is to make the warning message more clear. Something like
Lowlight expects "console" syntax language to be registered. Code can be highlighted with the appropriate syntax.
The size of the lowlight package is almost 900KB (minified!) because it imports all the highlight languages at the top of the module. This means that any package that uses lowlight should pay a huge penalty.
emphasize
is among one of those packages which are huge because of this
Hi, I'm facing this error
Error: Must use import to load ES Module: /home/rootlinux2/Documents/fr-bs-atoms/node_modules/lowlight/index.js
require() of ES modules is not supported.
I'm using the latest version of lowlight "lowlight": "^2.6.1"
I see that the package is built with target: ES2020
, which is great! except that node/CJS is still a mess with cjs<->module compatibility
if I want to use Node/cjs, how do I use lowlight / rehype-highlight? Is there a way to tell rehype, and/or maybe remark to not use lowlight, and use highlight directly?
This is caused by the following:
Lines 61 to 67 in ebddb10
configure
changes highlight.js
globals, but calling it with an empty object does not restore those globals. Leading to highlight.js being left in a broken state.
I'm not sure how to properly workaround this ATM. e.g. To force a separate copy of highlight.js for the use of lowlight.
Reproduction: https://stackblitz.com/edit/vitejs-vite-mjpizz?file=src/components/HelloWorld.vue
In order to display more uniformly, I hope to export the getLanguage
API of highlight.js
.
If the project installs highlight.js
repeatedly, I am worried that it is not the same highlight
instance
I'm getting an error after importing and running my implementation in tiptap that the module devlop is not found. https://github.com/wooorm/lowlight/blob/main/package.json#L37
I couldn't find this as a "thing" anywhere? A typo?
I’m getting (e.g.):
properties: { className: [ 'javascript' ] },
But Highlight.js uses language-javascript
Reference: highlightjs/highlight.js#2654 (comment)
I think this is an upstream issue with Lowlight? If Lowlight is wrapping us it probably could copy ALL our properties, as sometimes new ones are added (even in minor releases).
Original posted issue:
I started getting this error in my application once I updated to highlight.js 10.1.2.
TypeError: hljs.SHEBANG is not a function
javascript
node_modules/highlight.js/lib/languages/javascript.js:269
266 | name: 'JavaScript',
267 | aliases: ['js', 'jsx', 'mjs', 'cjs'],
268 | keywords: KEYWORDS$1,
> 269 | contains: [
| ^ 270 | hljs.SHEBANG({
271 | binary: "node",
272 | relevance: 5
I'm using react-lowlight
to do code highlighting. This is the code I have in my project:
import React from 'react';
import PropTypes from 'prop-types';
import Lowlight from 'react-lowlight';
import shallowCompare from 'react-addons-shallow-compare';
import js from 'highlight.js/lib/languages/javascript';
import nginx from 'highlight.js/lib/languages/nginx';
Lowlight.registerLanguage('js', js);
Lowlight.registerLanguage('nginx', nginx);
var createReactClass = require('create-react-class');
const CodeBlock = createReactClass({
displayName: 'CodeBlock',
propTypes: {
value: PropTypes.string,
language: PropTypes.string,
inline: PropTypes.bool
},
shouldComponentUpdate(nextProps, nextState) {
return shallowCompare(this, nextProps, nextState);
},
render: function() {
let language = 'js';
if(this.props.value && this.props.value.length > 0) {
language = this.props.language;
}
return (
<Lowlight
language={language || 'js'}
value={this.props.value || ''}
inline={this.props.inline}
/>
);
}
});
export default CodeBlock;
I had to downgrade to highlight.js 10.0.2 to get my application to work.
I’m writing code that outputs LaTeX. Lowlight seems like a good choice for highlighting code because it gives you access to an intermediate data structure (vs. the fully rendered HTML). The result should look like this:
\begin{Verbatim}[commandchars=\\\{\}]
\textcolor[RGB]{101,123,131}{#privateSlot }\textcolor[RGB]{133,153,0}{in }\textcolor[RGB]{101,123,131}{obj}
\end{Verbatim}
AFAICT, I’d have to:
This seems doable. I’m only wondering if someone has already done this (=mapping text fragments to colors), so that I don’t unnecessarily duplicate work.
Not sure if this affects you individually or not. I think it would?
react-syntax-highlighter/react-syntax-highlighter#226
Your registerLanguage
needs to support the new rawDefinition
functionality:
https://github.com/highlightjs/highlight.js/blob/master/src/highlight.js#L904
This is required for the Arduino language (and likely others in the future).
It could be cool to add position information as specified by https://github.com/syntax-tree/unist to the resulting HAST.
getLanguage is needed for safely extending languages during overall init:
see usage here: https://github.com/NullVoxPopuli/highlightjs-glimmer/blob/main/src/index.js#L19
I was using the lowlight for the tip tap editor and I want to configure the tip tap syntax highlighter extension but because it is not returning twig in the listLanguages() method I am not able to add the language
it seems that this awesome library is not easy to use in next js due to the ESM only new release.
I know this is more an issue for next-js than this library, but just wondering if would you consider to release a cjs version of lowlight ?
Just saw that you're flattening scopes... why not preserve them?
IE: title.function
becomes just "title" and "function" separately, which isn't really the same thing at all.
It seems like you're purposely losing data... and I'm not sure the benefit since you don't have to care about CSS or anything...
I am getting this error with react-app-markdown-with-custom-components
example and https://github.com/rstacruz/cheatsheets
content.
Error: Unknown language: `dosini` is not registered at coreHighlight (/home/mart/workspace/react-app-markdown-with-custom-components/node_modules/lowlight/lib/core.js:159:11) at High.highlight (/home/mart/workspace/react-app-markdown-with-custom-components/node_modules/lowlight/lib/core.js:112:20) at visitor (/home/mart/workspace/react-app-markdown-with-custom-components/node_modules/rehype-highlight/index.js:54:27) at one (/home/mart/workspace/react-app-markdown-with-custom-components/node_modules/unist-util-visit/index.js:31:16) at all (/home/mart/workspace/react-app-markdown-with-custom-components/node_modules/unist-util-visit/index.js:54:25) at one (/home/mart/workspace/react-app-markdown-with-custom-components/node_modules/unist-util-visit/index.js:39:14) at all (/home/mart/workspace/react-app-markdown-with-custom-components/node_modules/unist-util-visit/index.js:54:25) at one (/home/mart/workspace/react-app-markdown-with-custom-components/node_modules/unist-util-visit/index.js:39:14) at visit (/home/mart/workspace/react-app-markdown-with-custom-components/node_modules/unist-util-visit/index.js:22:3) at transformer (/home/mart/workspace/react-app-markdown-with-custom-components/node_modules/rehype-highlight/index.js:26:5) error An unexpected error occurred: "Command failed. Exit code: 1
TypeError: Cannot read property 'highlight' of undefined
which occurs on this code:
data.hChildren = _lowlight.default.highlight(lang, node.value, {
prefix
}).value;
which is transform via babel-jest -> babel -> @babel/plugin-transform-modules-commonjs
Versions:
lowlight main
(as of today: 869119b)
remark-highlightjs: 6.0.0
highlight.js 10.3.0 committed a piece of code which will cause lowlight to throw the following exception:
Uncaught TypeError: Cannot read property 'useBR' of undefined
The highlight's commit revision is : highlightjs/highlight.js@980832e
Following our discussion I decided to rename the internals just a little (removing all mention of CSS from the abstract tree itself, as that is a concern of the renderer, not the tree).
highlightjs/highlight.js@1db1892
This should land in 10.6 but should be super easy for you to deal with. I also now use a language
attribute instead of overloading kind
for sublanguage stuff.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.