enable syntax highlighting for source plugin

[ChristopherBiscardi]

Related Issue #300

This PR makes changes to the webpack config of the dev example. I have a pending PR that adds CSS Modules support to highlight.js at highlightjs/highlight.js#1234. This would remove the need to modify the webpack config for the example project. For now, the styles are global 😞

I'm asking for review on the approach here, since it introduces global styles currently and the css-modules approach isn't merged into highlight.js

[nikgraf]

@ChristopherBiscardi it still works fine if you don't apply the global styling, correct? In that case I think this approach is still fine.

In case your PR for highlight won't get merged it might be interesting if there is a lib like highlight using inline-styles.

[nikgraf]

The PR needs a small cleanup to comply with the linting. For the import linting to work highlight.js should be added to the package.json in the root directory as devDepedency.

[ChristopherBiscardi]

it still works fine if you don't apply the global styling, correct?

If the dev webpack config was not adjusted to exclude highlight css from CSS Modules processing: The source code is still processed just fine and the CSS is included in it's mangled form (which means everything will work, but the classnames won't match up with the generated source). The CSS Modules mangled classnames can not be applied until either that PR is merged or I move to publish a fork under ~"hljs-modules".

In case your PR for highlight won't get merged it might be interesting if there is a lib like highlight using inline-styles.

Take a look at how I do it with the highlight.js branch here. It's a bit convoluted (read: require hook) for reasons that are only relevant to my blog setup, but ideally you would be able to call hljs.configure({ classNames: css }); and highlight would use whatever compiled classnames you want.

Does that fulfill your "inline-styles" idea? I'm considering maintaining the PR as a fork on a longer term basis if the PR is not merged, since this feature is extremely useful for me.

[ChristopherBiscardi]

Given the discussion on this similar-in-intent PR which I just saw, and the lack of response on my own PR (~20 days, which fits with previous discussion), I intend to release the fork as hljs-modules.

@nikgraf Would using said package be an acceptable path for carte-blanche?

[FezVrasta]

Have you considered to use react-highlight (or any other alternative)? https://github.com/akiran/react-highlight

It seems to have a smaller footprint on the project.

[wmertens]

You could also use https://github.com/styled-components/styled-components/blob/master/docs/api.md#injectglobal to inject the css directly? Then it is not dependent on the webpack config.

@FezVrasta react-highlight just uses highlight.js, so not sure how that can be lighter-weight?

[FezVrasta]

Because you don't have to manually integrate the library in React.

[ChristopherBiscardi]

closing for inactivity to clean up my PRs :)