main branch not compat with remark-highlightjs?
#36
Comments
|
if my babel config for jest is now this: module.exports = {
env: {
test: {
plugins: [
[
require('@babel/plugin-transform-modules-commonjs'),
{
importInterop: 'node',
},
],
]}}};then I get this error: |
|
ok, so with oof |
|
so I guess... how does lowlight / remark / etc test against cjs? |
|
We’re switching to ESM: unifiedjs/unified#121.
|
|
so it wouldn't be possible to have an alpha release? :D |
|
You should be able to use Could you try that? If it doesn’t work, I can make a beta. |
|
👍 I made this change❯ gd
diff --git a/package.json b/package.json
index 69a7a33..f8fb698 100644
--- a/package.json
+++ b/package.json
@@ -39,7 +39,7 @@
"eslint": "^7.23.0",
"eslint-plugin-html": "^6.1.2",
"highlight.js": ">= 11.0.0-alpha0",
- "lowlight": "github:NullVoxPopuli/lowlight#add-get-language",
+ "lowlight": "github:wooorm/lowlight",
"jest": "^26.6.3",
"rehype": "^11.0.0",
"rehype-highlight": "^4.1.0",
diff --git a/tests/integration/rehype.test.cjs b/tests/integration/rehype.test.cjs
index 13630d5..c80ad1e 100644
--- a/tests/integration/rehype.test.cjs
+++ b/tests/integration/rehype.test.cjs
@@ -6,9 +6,9 @@ const highlight = require('rehype-highlight');
const hljs = require('highlight.js');
const { setup } = require('../../dist/glimmer.cjs.cjs');
-const { tag } = require('../-utils');
+// const { tag } = require('../-utils');
-setup(hljs);
+// setup(hljs);
function parse(text) {
return rehype()
@@ -18,7 +18,7 @@ function parse(text) {
// same error: lowlight.registerLanguage is not a function
//
// glimmer: require('highlight.js/lib/languages/handlebars'),
- // hbs: require('highlight.js/lib/languages/handlebars'),
+ hbs: require('highlight.js/lib/languages/handlebars'),
// glimmer: setup,
// glimmer: hljs.getLanguage('glimmer'),
},
diff --git a/yarn.lock b/yarn.lock
index 1654a31..e1c8caa 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5764,9 +5764,9 @@ lower-case@^2.0.2:
dependencies:
tslib "^2.0.3"
-lowlight@^1.10.0, lowlight@^1.2.0, "lowlight@github:NullVoxPopuli/lowlight#add-get-language":
+lowlight@^1.10.0, lowlight@^1.2.0, "lowlight@github:wooorm/lowlight":
version "1.20.0"
- resolved "https://codeload.github.com/NullVoxPopuli/lowlight/tar.gz/f93d85903e278129a2579e977fec683ac3aa3d36"
+ resolved "https://codeload.github.com/wooorm/lowlight/tar.gz/869119be9a7f12eb5da0092800a7b4622d70499b"
dependencies:
"@types/hast" "^2.0.0"
fault "^2.0.0"
I made sure to use an existing language to make sure it wasn't an issue with my plugin, but I still get: but, that's because lowlight no longer has a default export. But, no matter what I do, I can't get my code block higlighted. at most, the |
|
also, if I specify my own grammar, I get this error: which tells me that there might be an incompatibility with what rehype-highlight is expecting and how my grammar works when used in cjs directly with hljs |
|
ok, for this |
|
ok, so that I've fixed issues with my own grammar, the issue where nothing gets highlighted is still present. This is what I'm doing: const { stripIndent } = require('common-tags');
const rehype = require('rehype');
const markdown = require('remark-parse');
const remark2rehype = require('remark-rehype');
const highlight = require('rehype-highlight');
const html = require('rehype-stringify')
const hljs = require('highlight.js');
const { externalSetup } = require('../../dist/glimmer.cjs.cjs');
const { tag } = require('../-utils');
function parse(text) {
debugger;
return rehype()
.data('settings', { fragment: true })
.use(markdown)
.use(remark2rehype)
.use(highlight, {
languages: {
// none of these highlight anything
// glimmer: require('highlight.js/lib/languages/handlebars'),
// hbs: require('highlight.js/lib/languages/handlebars'),
// js: require('highlight.js/lib/languages/javascript'),
// glimmer: hljs.getLanguage('glimmer'),
// glimmer: externalSetup,
},
})
.use(html)
.processSync(text)
.toString();
}
describe('Rehype', () => {
it('works', async () => {
expect(
// I am remembering to change the language tag here ;)
parse(stripIndent`
\`\`\`hbs
{{@arg}}
\`\`\`
`)
).toEqual(
'<pre><code class="hljs language-glimmer">' +
tag('punctuation mustache', ['{{', tag('punctuation', '@'), tag('params', 'arg'), '}}']) +
'</code></pre>'
);
});
}); |
|
Did you ever actually get this to work with highlight.js itself? I think your grammar is incorrect. So, I’m in the codebase of <h1>Hello World!</h1>
<pre><code class="language-xxx">whatever</code></pre>And var vfile = require('to-vfile')
var report = require('vfile-reporter')
var rehype = require('rehype')
var highlight = require('./index.js')
var glimmer = require('highlightjs-glimmer').glimmer
console.log('xxx:', glimmer)
rehype()
.data('settings', {fragment: true})
.use(highlight, {
languages: {
xxx: glimmer
}
})
.process(vfile.readSync('example.html'), function (error, file) {
console.error(report(error || file))
console.log(String(file))
})When I run that, I get an error: Going into I get: It looks like hljs can’t handle your regex groups? |
yes. it is not incorrect. here is a demo: https://hljs-glimmer.nullvoxpopuli.com |
|
OK, but if it only works with an unreleased version of highlight.js, then it’s not too weird that it doesn’t work with lowlight, or rehype-highlight, either? Can you make it work with hljs 10? |
Yeah, I've mostly been surprised that I can't force the highlightjs dependency. There are enough differences between
I cannot -- hljs v11 has a ton of new grammar authoring features which are really nice :D |
|
You could copy/paste or fork But for this issue: yes, the main branch is not compatible with |
|
all good! at least the issue is known! :D |
Currently getting:
which occurs on this code:
which is transform via babel-jest -> babel -> @babel/plugin-transform-modules-commonjs
Versions:
lowlight
main(as of today: 869119b)remark-highlightjs: 6.0.0
The text was updated successfully, but these errors were encountered: