Feature: Code block keywords highlight and language recognition


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.


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 =
  addOptions() {
    return {
      lowlight: {},
      defaultLanguage: null,

  addProseMirrorPlugins() {
    return [
      ...this.parent?.() || [],
        name: this.name,
        lowlight: this.options.lowlight,
        defaultLanguage: this.options.defaultLanguage,
see how hard it is to read this code by the way


1 week


Select language dropdown menu.

Rabbit holes:

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