Code highlighting feature #304

lekzd · 2018-02-05T22:32:20Z

Topics to discuss:

how to make gulp task with highlighting separately (problems with text replacing in index.html and with highlight already highlighted file)
switching off highlighting of <pre><code></code></pre> snipeets without any class? (class needed to highlight as specific language, default is HTML)

fixed lint warning for forgotten semicolon in gulpfile

add highlightJs gulp plugin add copying of styles for highlighting add highlighting to gulp prepare task

one performance tweak for gulp task

pepelsbey · 2018-02-06T14:23:04Z

.gitignore

@@ -1,3 +1,4 @@
+.idea


It’s not related to project’s code, otherwise it might fill with VS Code, Sublime, Atom, Notepad++, etc. configs. There’s global .gitignore for that.

pepelsbey · 2018-02-06T14:30:55Z

Suggestion: do not apply HTML highlight to every <pre> by default, but look for explicit class names with a proper language name and do the job only if it’s found. The same idea applies to already highlighted case: if there’s a language name and there are no classes inside of this <pre> then stop the script. Is there a way to detect of code is already highlighted?

lekzd · 2018-02-06T15:08:05Z

@pepelsbey at first, I have selector for code for highlighting '.slide pre:has(code)', not even 'pre' tag would be highlighted.
at second, I can set any attribute of already highlighted snippet, maybe it can help.

lekzd · 2018-02-13T09:01:38Z

@pepelsbey looks like all points regarding our talk are implemented.

lekzd · 2018-03-14T12:31:36Z

@pepelsbey any updates?

pepelsbey · 2018-03-19T08:36:52Z

Couldn’t find time to properly test it. Will try to have a look this week. Sorry.

pepelsbey · 2018-06-25T16:17:55Z

Right, I’m back. We have a few problems here, but nothing too scary :)

Fork is a bit outdated, since there’s been 2.5.0 release. I tried to merge it but got stuck with package-lock.json. Will you have some time to update your PR with the latest master? I know it’s totally my fault with outdated fork situation. But we can still make it work!
I’d prefer simpler naming: rather highlight than highlightCodeSnippets both for script and variables. The same applies to highlightStyles, copyStyles, highlightFiles. There’s no right or wrong here, but you can clearly see the difference merge(shower, core, themes, highlightStyles). Like there were two different people writing this code. Oh wait :)

…eature/code-highlighter # Conflicts: # gulpfile.js

lekzd · 2018-07-03T07:54:06Z

@pepelsbey looks like all was done

avdeev · 2018-07-03T09:12:38Z

highlightCode.js

@@ -0,0 +1,100 @@
+


not useful empty line

avdeev · 2018-07-03T09:15:31Z

package.json

    "gulp-replace": "^1.0.0",
-    "gulp-zip": "^4.0.0",
+    "gulp-zip": "^4.1.0",
+    "gulp-util": "^3.0.8",


use of the deprecated package https://medium.com/gulpjs/gulp-util-ca3b1f9f9ac5

whole gulp community is trying to remove it from projects :)

avdeev · 2018-07-03T09:17:25Z

package.json

    "merge-stream": "^1.0.0",
-    "path-exists-cli": "^1.0.0"
+    "path-exists-cli": "^1.0.0",
+    "run-sequence": "^2.2.1"


is this a new package?

I do not see its use in PR

It’s not used anymore since moving to Gulp 4.

pepelsbey · 2018-07-03T09:31:43Z

gulpfile.js

+			`$1${STYLES_DEST_PATH}$3`, { skipBinary: true }
+		))
+		.pipe(highlightCodeSnippets())
+		.pipe(gulp.dest(''));


Error: Invalid dest() folder argument. Please specify a non-empty string or a function.

It gives an error, I guess it should be '.'

pepelsbey · 2018-07-03T09:32:35Z

gulpfile.js

+			/(<link rel="stylesheet" href=")(node_modules\/highlight\.js\/styles)\/(.*\.css">)/g,
+			`$1${STYLES_DEST_PATH}$3`, { skipBinary: true }
+		))
+		.pipe(highlightCodeSnippets())


It’s highlightCode() now.

pepelsbey · 2018-07-03T09:34:20Z

package.json

    "merge-stream": "^1.0.0",
-    "path-exists-cli": "^1.0.0"
+    "path-exists-cli": "^1.0.0",
+    "run-sequence": "^2.2.1"


It’s not used anymore since moving to Gulp 4.

pepelsbey · 2018-07-03T09:42:15Z

You suggest in docs to run gulp highlight, but if prepared folder doesn’t exist yet you’ll just get highlight styles copied, but no real work will be done. I guess it should be a sequence: always prepare then highlight.

fixed code issues fixed potential security issue with browser-sync using 'npm audit fix'

…eature/code-highlighter

lekzd · 2018-07-23T11:24:14Z

@pepelsbey btw I removed info about how to run code highlight separately from docs because it included to preparate task by default.

pepelsbey · 2018-08-24T08:43:54Z

@nikolay-govorov, it seems code highlighting is another feature worth moving to CLI :)

pepelsbey · 2018-09-03T10:51:14Z

@nikolay-govorov what do think about such feature for shower-cli?

nikolay-govorov · 2018-09-03T11:44:44Z

I think it would be cool to have this in the CLI, but I'm not sure I know how to integrate it. Is it going to be something like the --code-highlighting flag for prepare?

pepelsbey · 2018-09-03T11:45:57Z

I’d just have it as shower highlight task.

nikolay-govorov · 2018-09-03T11:52:17Z

But what will she do? Now archive and publish are building the presentation, not looking in the prepared folder as it was in the old build. How to work the command highlight?

pepelsbey · 2018-09-03T13:41:38Z

Hmm, then you’re right. It makes sense to use it as a flag, rather

shower prepare --highlight
shower archive --highlight

pepelsbey · 2019-02-12T13:16:26Z

We decided that such a feature does not align with the project’s vision. Presentation’s HTML is a source file that should be easy to write and understand. A generator that modifies the source file would hurt source code readability. We’d rather go manual (mark) or dynamically generated (highlight.js) code highlight path.

I’m sorry it took the whole year to get back to this PR and decide.

shvaikalesh · 2019-02-12T16:40:31Z

As @RubenVerborgh articulated in this comment, I don't see any reason for having syntax hightlight as either plugin or gulp task. Shower's code blocks have notion of lines (multiple <code> elements inside <pre>) you can mark. That seems like the only thing that requires special care, but it is not Shower-specific. We should rather extract this feature as custom element with hightlight.js built-in.

lekzd added 3 commits February 5, 2018 23:34

cleanup package.json and gulpfile from unused packages

b91579b

fixed lint warning for forgotten semicolon in gulpfile

made npm update

b0d7b1c

add highlightJs gulp plugin add copying of styles for highlighting add highlighting to gulp prepare task

add readme about highlighting to features.md

4ad6a44

one performance tweak for gulp task

pepelsbey reviewed Feb 6, 2018

View reviewed changes

move highlighting code to separate gulp task

9dcc1ea

lekzd added 4 commits July 2, 2018 23:47

Update with remote master

0698d5e

Merge remote-tracking branch 'origin/feature/code-highlighter' into f…

9239c90

…eature/code-highlighter # Conflicts: # gulpfile.js

fixed highlighting after merge

9b7e466

simplify variable names

e182dc3

avdeev requested changes Jul 3, 2018

View reviewed changes

pepelsbey requested changes Jul 3, 2018

View reviewed changes

Vadim Makeev and others added 5 commits July 3, 2018 12:47

Update highlight docs

cdefb5b

gulp-util package replaced with vinyl

b9f6fb2

fixed code issues fixed potential security issue with browser-sync using 'npm audit fix'

Merge remote-tracking branch 'origin/feature/code-highlighter' into f…

04c3dc8

…eature/code-highlighter

documentation updated

4afd8f5

updated with master branch

6139843

nikolay-govorov mentioned this pull request Aug 24, 2018

Config for shower shower/cli#10

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Code highlighting feature #304

Code highlighting feature #304

lekzd commented Feb 5, 2018 •

edited

pepelsbey Feb 6, 2018

pepelsbey commented Feb 6, 2018 •

edited

lekzd commented Feb 6, 2018

lekzd commented Feb 13, 2018

lekzd commented Mar 14, 2018

pepelsbey commented Mar 19, 2018

pepelsbey commented Jun 25, 2018

lekzd commented Jul 3, 2018

avdeev Jul 3, 2018

avdeev Jul 3, 2018

avdeev Jul 3, 2018

pepelsbey Jul 3, 2018

pepelsbey Jul 3, 2018

pepelsbey Jul 3, 2018

pepelsbey Jul 3, 2018

pepelsbey commented Jul 3, 2018 •

edited

lekzd commented Jul 23, 2018

pepelsbey commented Aug 24, 2018

pepelsbey commented Sep 3, 2018

nikolay-govorov commented Sep 3, 2018

pepelsbey commented Sep 3, 2018

nikolay-govorov commented Sep 3, 2018 •

edited

pepelsbey commented Sep 3, 2018

pepelsbey commented Feb 12, 2019

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

shvaikalesh commented Feb 12, 2019

Code highlighting feature #304

Code highlighting feature #304

Conversation

lekzd commented Feb 5, 2018 • edited

Choose a reason for hiding this comment

pepelsbey commented Feb 6, 2018 • edited

lekzd commented Feb 6, 2018

lekzd commented Feb 13, 2018

lekzd commented Mar 14, 2018

pepelsbey commented Mar 19, 2018

pepelsbey commented Jun 25, 2018

lekzd commented Jul 3, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

pepelsbey commented Jul 3, 2018 • edited

lekzd commented Jul 23, 2018

pepelsbey commented Aug 24, 2018

pepelsbey commented Sep 3, 2018

nikolay-govorov commented Sep 3, 2018

pepelsbey commented Sep 3, 2018

nikolay-govorov commented Sep 3, 2018 • edited

pepelsbey commented Sep 3, 2018

pepelsbey commented Feb 12, 2019

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

shvaikalesh commented Feb 12, 2019

lekzd commented Feb 5, 2018 •

edited

pepelsbey commented Feb 6, 2018 •

edited

pepelsbey commented Jul 3, 2018 •

edited

nikolay-govorov commented Sep 3, 2018 •

edited