Feature: Code block keywords highlight and language recognition

Problem:

Currently, code blocks in the app are just a blockquote of sorts. Highlighting code keywords like in IDEs would be useful for documentation and significantly improve the user experience. Language recognition or just allowing users to select it would be useful for programming related publications.

Solution:

The solution is very simple and would require just extending the current code block implementation with tiptap's lowlight plugin. This plugin uses highlight.js which already has automatic language detection for 192 languages as well as configurable themes. It will need to be adapted to our implementation of the code block, but the current implementation is mostly just tiptap's code block extensions with a few removed options. We will need to extend current extension with language and lowlight options and it should work perfectly fine:

export const CodeBlockLowlight =
CodeBlock.extend<CodeBlockLowlightOptions>({
  addOptions() {
    return {
      ...this.parent?.(),
      lowlight: {},
      defaultLanguage: null,
    }
  },

  addProseMirrorPlugins() {
    return [
      ...this.parent?.() || [],
      LowlightPlugin({
        name: this.name,
        lowlight: this.options.lowlight,
        defaultLanguage: this.options.defaultLanguage,
      }),
    ]
  },
})

see how hard it is to read this code by the way

Scope:

1 week

No-Gos:

Select language dropdown menu.

Rabbit holes:

highlight.js might have some issues with the current code block implementation.

Containing:Problem:

Published:10 mo. ago Tuesday, February 6th, 2024

Author:

z6Mkv2To...9i9pjBbW

First Version

Open in Mintter app