Rebuild Custom code blocks languages #2338

montogeek · 2018-07-05T18:31:19Z

After 4 hours doing this I finally managed to solve it.

This PR introduces support for custom js-with-links code blocks.

File prism-links.js is a copy of https://github.com/montogeek/remark-refractor, once this PR is merged I will update the dependency.

File js-with-links.js will be moved to https://github.com/montogeek/remark-refractor as well.

One changed is necessary, update js-with-links to jslinks, I am not 100% sure, but it seems Prism doesn't like composed names.

Also updated our process readme script to replace weird code examples (console, sh) to bash.

Update our content removing wrong and unnecessary code languages.

montogeek · 2018-07-05T18:32:06Z

js-with-links.js

+
+module.exports = jslinks;
+
+jslinks.displayName = 'jslinks';


It seems this property should be the same as the code snippet language.

Should we keep all the commented code?

From the original PR text:

File js-with-links.js will be moved to https://github.com/montogeek/remark-refractor as well.

It means commented code will be deleted, as it is right now: https://github.com/montogeek/remark-refractor/blob/master/src/index.js

montogeek

Need cleanup.

montogeek · 2018-07-05T18:32:23Z

package.json

@@ -41,11 +41,6 @@
    "serve": "npm run build && sirv start ./dist --port 4000",
    "deploy": "gh-pages -d dist"
  },
-  "husky": {


Will revert

montogeek · 2018-07-05T18:34:56Z

prism-links.js

+      try {
+        data.hChildren = refractor.highlight(node.value, lang);
+
+        for (let index = 0; index < data.hChildren.length; index++) {


I find all comments in the tree and update every one by inject a link element.

Can we rename the hChildren to something more meaningful. It can be just hastChildren or children, or hastNodes.

It can't, otherwise other libraries won't read it.
That is how it works: https://github.com/syntax-tree/mdast-util-to-hast/

montogeek · 2018-07-05T18:35:12Z

prism-links.js

+      }
+
+      try {
+        data.hChildren = refractor.highlight(node.value, lang);


refractor returns a hast tree.

montogeek · 2018-07-05T18:35:48Z

prism-links.js

+          if (element.properties && element.properties.className.includes('comment')) {
+            const { value } = element.children[0];
+
+            let match = /\[([^[\]]+?)\]\((.+?)\)/.exec(value);


This Regex find all comments, it is from markdown.js file.

Can we place a comment for this then?

montogeek · 2018-07-05T18:36:24Z

prism-links.js

+            if (match !== null) {
+              const [, text, url] = match;
+
+              element.children = [


Node children are:

//

An empty space

Link

montogeek · 2018-07-05T18:36:50Z

prism-links.js

+          }
+        }
+
+        node.children = [node.data.hChildren];


Will removed this line, it is not necessary.

montogeek · 2018-07-05T18:37:11Z

src/utilities/process-readme.js

-    .replace(/<!--[\s\S]*?-->/g, '');
+    .replace(/<!--[\s\S]*?-->/g, '')
+    // Replace code
+    .replace(/```console/g, '```bash')


This new 2 lines save a lot of Prism warnings.

do you think its worth it replacing content on the fly? i would suggest find replace console -> bash, or is this issue coming from external readme files we fetch?

I kinda have the feeling that we should open a PR in projects using console and change it instead of this because it is not a valid language option in markdown regarding highlighting.

@EugeneHlushko Yes, it is from external readmes.
@jeremenichelli Yep :D, will revert

We can keep this, until we replace it in all READMEs.

I already talked to @shellscape, console is better because GitHub support is richer than bash.
This is easily fixed with a plugin, just registering it using Prism:
Prism.languages['console'] = Prism.languages.extend('sh', {})

jeremenichelli

Great job man, just some minor comments to address.

jeremenichelli · 2018-07-19T20:39:26Z

js-with-links.js

+
+module.exports = jslinks;
+
+jslinks.displayName = 'jslinks';


Should we keep all the commented code?

jeremenichelli · 2018-07-19T20:39:34Z

package.json

@@ -41,11 +41,6 @@
    "serve": "npm run build && sirv start ./dist --port 4000",
    "deploy": "gh-pages -d dist"
  },
-  "husky": {


jeremenichelli · 2018-07-19T20:41:36Z

prism-links.js

+      try {
+        data.hChildren = refractor.highlight(node.value, lang);
+
+        for (let index = 0; index < data.hChildren.length; index++) {


Can we rename the hChildren to something more meaningful. It can be just hastChildren or children, or hastNodes.

jeremenichelli · 2018-07-19T20:41:56Z

prism-links.js

+          if (element.properties && element.properties.className.includes('comment')) {
+            const { value } = element.children[0];
+
+            let match = /\[([^[\]]+?)\]\((.+?)\)/.exec(value);


Can we place a comment for this then?

jeremenichelli · 2018-07-19T20:42:08Z

prism-links.js

+          }
+        }
+
+        node.children = [node.data.hChildren];


jeremenichelli · 2018-07-19T20:42:52Z

prism-links.js

+      }
+
+      data.hProperties = data.hProperties || {};
+      data.hProperties.className = ['hljs', ...(data.hProperties.className || []), `language-${lang}`];


Same as above, can we rename the hProperties to something more readable?

We can't, same reason as hChildren, that is how unified ecosystem works.

jeremenichelli · 2018-07-19T20:43:25Z

src/utilities/process-readme.js

-    .replace(/<!--[\s\S]*?-->/g, '');
+    .replace(/<!--[\s\S]*?-->/g, '')
+    // Replace code
+    .replace(/```console/g, '```bash')


We can keep this, until we replace it in all READMEs.

montogeek · 2018-07-22T20:55:55Z

I will revamp this PR, after working a bit more with details code blocks, I found some improvements.

montogeek · 2018-12-15T22:50:03Z

Closing in favour of #2564

montogeek added 2 commits July 5, 2018 16:12

Update code examples language

6a0e9af

Add support for JS with links code blocks

2809783

montogeek requested a review from jeremenichelli July 5, 2018 18:31

montogeek commented Jul 5, 2018

View reviewed changes

montogeek requested a review from EugeneHlushko July 5, 2018 18:37

montogeek changed the title ~~Rebuild prism languages~~ Rebuild Custom code blocks languages Jul 5, 2018

jeremenichelli reviewed Jul 19, 2018

View reviewed changes

montogeek mentioned this pull request Jul 22, 2018

Rebuild the Site #2039

Merged

16 tasks

Merge branch 'rebuild' into rebuild-prism-languages

01b3f3f

montogeek closed this Dec 15, 2018

montogeek deleted the rebuild-prism-languages branch December 15, 2018 22:50


		module.exports = jslinks;

		jslinks.displayName = 'jslinks';


		module.exports = jslinks;

		jslinks.displayName = 'jslinks';

Uh oh!

Rebuild Custom code blocks languages #2338

Rebuild Custom code blocks languages #2338

Uh oh!

Conversation

montogeek commented Jul 5, 2018

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

montogeek left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

montogeek Jul 19, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jeremenichelli left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

montogeek commented Jul 22, 2018

Uh oh!

montogeek commented Dec 15, 2018

Uh oh!

Uh oh!

montogeek Jul 19, 2018 •

edited

Loading