Skip to content

Add syntax highlighting to code tags - #2457

Open
Plastikmensch wants to merge 6 commits into
glitch-soc:mainfrom
Plastikmensch:redo/add-syntax-highlighting-to-code-blocks
Open

Add syntax highlighting to code tags#2457
Plastikmensch wants to merge 6 commits into
glitch-soc:mainfrom
Plastikmensch:redo/add-syntax-highlighting-to-code-blocks

Conversation

@Plastikmensch

@Plastikmensch Plastikmensch commented Nov 3, 2023

Copy link
Copy Markdown

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
Copy Markdown
Author

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

@github-actions

Copy link
Copy Markdown

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 <plastikmensch@users.noreply.github.com>
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 <plastikmensch@users.noreply.github.com>
Allows users to set the language on code tags, which was previously discarded.

Also allows this attribute on incoming toots.

Signed-off-by: Plastikmensch <plastikmensch@users.noreply.github.com>
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 <plastikmensch@users.noreply.github.com>
Adds a new function to add syntax highlighting on `contentHtml`

Also supports translated content.

Signed-off-by: Plastikmensch <plastikmensch@users.noreply.github.com>
Add tests to make sure valid `code-lang` attributes are kept and invalid ones removed.

Signed-off-by: Plastikmensch <plastikmensch@users.noreply.github.com>
@Plastikmensch
Plastikmensch force-pushed the redo/add-syntax-highlighting-to-code-blocks branch from 4b77682 to 5416d99 Compare November 17, 2023 13:32
@github-actions

Copy link
Copy Markdown

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

@github-actions

Copy link
Copy Markdown

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

@ClearlyClaire
ClearlyClaire force-pushed the main branch 2 times, most recently from 11bd515 to 7821634 Compare September 25, 2025 16:38
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