Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Code syntax highlighting #4

Closed
catamphetamine opened this issue Jul 20, 2019 · 11 comments
Closed

Code syntax highlighting #4

catamphetamine opened this issue Jul 20, 2019 · 11 comments

Comments

@catamphetamine
Copy link
Owner

catamphetamine commented Jul 20, 2019 •
edited
Loading

As discussed in the arisuchan and lainchan issue, those two chans have code syntax highlighting.

The markup is already generated as a standard one:

<pre>
  <code class="language-...">
    ...
  </code>
</pre>

A code highlighter could be included on a page.
For example, Prism.

There's an Autoloader plugin that loads syntaxes dynamically.

<!DOCTYPE html>
<html>
<head>
	...
	<link href="https://cdn.jsdelivr.net/npm/prismjs@1.x/themes/prism.css" rel="stylesheet" />
</head>
<body>
	...
	<script src="https://cdn.jsdelivr.net/npm/prismjs@1.x/prism.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/prismjs@1.x/plugins/autoloader/prism-autoloader.min.js"></script>
	<script>Prism.plugins.autoloader.languages_path = 'https://cdn.jsdelivr.net/npm/prismjs@1.x/components/'</script>
</body>
</html>

That would be Prism, but by default it only highlights code (and loads syntaxes) on page load.
React is different — it renders stuff after page load, so there should be a way to re-run Prism highlighter after the code component has rendered.

There seems to be a React wrapper for Prism that does the dynamic re-running thing:
https://github.com/FormidableLabs/prism-react-renderer
@catamphetamine catamphetamine mentioned this issue Jul 20, 2019
Closed
catamphetamine pushed a commit that referenced this issue Jul 20, 2019
@purecatamphetamine
#4. Parse lainchan/arisuchan code language
d2fa7f9
catamphetamine referenced this issue in catamphetamine/webapp-frontend Jul 20, 2019
@purecatamphetamine
catamphetamine/captchan#4. Code syntax highlighting
f89100f
@DonaldTsang
Copy link

Notes on 8/tech/?

@catamphetamine
Copy link
Owner Author

What about it?

@DonaldTsang
Copy link

About how 8chan also has code tags for scripts

@catamphetamine
Copy link
Owner Author

I visited 8ch.net and looked at the /tech/ board.
Seems like standard non-highlighted syntax.

<pre class="prettyprint prettyprinted" style="display: inline-block;"><code></code></pre>

There seems to be no AI included to autodetect a language.
PrismJS/prism#1313

So unless a chan explicitly sets the language on <pre/> or <code/> it won't be highlighted by the highlighter.
8ch.net seems to not set the explicit language on <pre/> or <code/>.
So I guess 8ch.net wouldn't support syntax highlighting.

image

@DonaldTsang
Copy link

DonaldTsang commented Jul 20, 2019 •
edited
Loading

@catamphetamine try typing this into the post

[code]python
x = 42
[/code]
[code]c
int x = 42
[/code]

and see what happens next, maybe it is pre-generated?

@catamphetamine
Copy link
Owner Author

@DonaldTsang Well, on the screenshot above I can see that it has highlighted C but it doesn't provide the language info anywhere so it's underiveable I guess.
And 8ch.net engine seems to not having been maintained for a couple of years now so I guess there won't be such a feature.
Only some kind of an AI could autodetect a language I guess.

@catamphetamine
Copy link
Owner Author

catamphetamine commented Jul 20, 2019 •
edited
Loading

Note to self:

Seems that the original Prism library is made for highlighting syntax on page load while React rendering is different.

There seems to be a library called react-syntax-highlighter that's based on some other libraries that are based on Prism and highlight-js.

The library supports both loading new language syntaxes on demand (asynchronously) and even loading Prism library core itself (about 20kB gzipped) asynchronously.

https://www.npmjs.com/package/react-syntax-highlighter#async-build

import { PrismAsyncLight as SyntaxHighlighter } from 'react-syntax-highlighter';

The "async light" version will defer loading all syntaxes and the library itself.

A language could be checked for support using SyntaxHighlighter.supportedLanguages.includes(language).

catamphetamine referenced this issue in catamphetamine/webapp-frontend Jul 20, 2019
@purecatamphetamine
catamphetamine/captchan#4. Code syntax highlighting note
f659764
@catamphetamine
Copy link
Owner Author

Hmm, I guess it kinda works.
Not for 8ch.net though, because it doesn't tell the language.
But for lainchan/arisuchan it would I guess.

image

@DonaldTsang
Copy link

In that case it shows how lain/arisu is better

catamphetamine referenced this issue in catamphetamine/webapp-frontend Jul 20, 2019
@purecatamphetamine
catamphetamine/captchan#4. Code syntax highlighting.
fda2aee
catamphetamine referenced this issue Jul 20, 2019
@purecatamphetamine
catamphetamine/captchan#4. Code syntax highlighting.
34a1e39
@catamphetamine
Copy link
Owner Author

@DonaldTsang deployed on gh-pages. Closing.

lainchan works:

https://catamphetamine.github.io/captchan/%CE%BB/13961?chan=lainchan

arisuchan won't work because it doesn't provide the language.
It does have the language on a rendered HTML page but the JSON API doesn't provide the language:

https://arisuchan.jp/λ/res/37.html

HTML page response:

image

JSON API response com:

<pre class='block'><code class='block '>#!/usr/bin/ruby↵require

In that case it shows how lain/arisu is better

Yeah, those two have been crafted with passion.
Especially arisuchan which is supercool.

@catamphetamine
Copy link
Owner Author

Ahh, I guess I see what's the reason: arisuchan most likely uses highlight.js's autodetect feature which requires all syntaxes to be loaded which is not an option.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@catamphetamine @DonaldTsang