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.

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

Add syntax highlighting to code tags #2457

Open
wants to merge 6 commits into
base: main
Choose a base branch
from

Conversation

Plastikmensch
Copy link

@Plastikmensch Plastikmensch commented Nov 3, 2023

Closes #2011
Supersedes #2015

The old PR was a mess, so I redid it.

Overview of changes:

  • Adds highlight.js node dependency
  • Adds code-languages.yml containing supported languages to /config
  • Changes MASTODON_STRICT and advanced text formatter to allow data-codelang attribute
  • Adds data-codelang and title attributes to code tags in web UI

Preview:
Toot containing multiple code blocks

Code blocks in the reply indicator are not highlighted as it uses a light background.
Unfortunately this is also the case for the report modal, where code blocks are highlighted.
Adding a background to code blocks would mitigate this problem, but it has been suggested multiple times, but not implemented.

code-languages.yml has been created with the output of the following script:

const highlightjs = require('highlight.js');

let langList = highlightjs.listLanguages();

let allLangs = '';
let count = 0;

for (let lang of langList) {
  if (lang.match(/^[a-zA-Z0-9.#+-]+$/)) allLangs += `- ${lang}\n`; count++;
  let langObject = highlightjs.getLanguage(lang).aliases;

  if(!langObject) continue;
  for (let alias of langObject) {
    if(alias.match(/^[a-zA-Z0-9.#+-]+$/)) allLangs += `- ${alias}\n`; count++;
  }
}

console.log(`Found ${count} valid languages and aliases:`);
console.log(allLangs);

This script has to be run again when adding third-party language support packages.

@Plastikmensch
Copy link
Author

Just noticed that highlight.js now adds a "data-highlighted" attribute to highlighted elements.
Not sure whether to keep or remove that.

Copy link

This pull request has merge conflicts that must be resolved before it can be merged.

highlight.js will be used to do the highlighting in the web interface

Signed-off-by: Plastikmensch <[email protected]>
Imports necessary styles from highlight.js

Github style has been chosen as a default, because it is what most people will be familiar with.

Signed-off-by: Plastikmensch <[email protected]>
Allows users to set the language on code tags, which was previously discarded.

Also allows this attribute on incoming toots.

Signed-off-by: Plastikmensch <[email protected]>
Adds a new yml file containing all valid code languages which are supported by highlight.js

This file has been created by a script as the list of supported languages is unreliable.

This is not ideal, but highlight.js made it clear they won't add new languages natively. Instead additional language support is provided by third-party packages.
If such a third-party package is installed, this file needs to be updated to support the new aliases.

When an unsupported language is given, the `data-codelang` attribute is removed using a new transformer.

Signed-off-by: Plastikmensch <[email protected]>
Adds a new function to add syntax highlighting on `contentHtml`

Also supports translated content.

Signed-off-by: Plastikmensch <[email protected]>
Add tests to make sure valid `code-lang` attributes are kept and invalid ones removed.

Signed-off-by: Plastikmensch <[email protected]>
@Plastikmensch Plastikmensch force-pushed the redo/add-syntax-highlighting-to-code-blocks branch from 4b77682 to 5416d99 Compare November 17, 2023 13:32
Copy link

This pull request has resolved merge conflicts and is ready for review.

Copy link

This pull request has merge conflicts that must be resolved before it can be merged.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

support syntax highlighting for fenced code block
1 participant