titles are hard

i’m using this space to test my notion-render plugins, and i didn’t know what title to give it, so it’ll be like this for a while. this package is really old and hasn’t been updated for a year, but it works really well. if it stops working as expected, i’d probably make a fork of it and add these plugins to the fork too.

it has an in-built code syntax plugin with highlight.js, but i just prefer prism, so i created my own. i also created a video renderer on 2025-01-30, but i might add a few more plugins depending on what i require and what’s missing from this package. i’ve also linked the og docs for it here.

code plugin - with prism

here’s the plugin i created:

import { createBlockRenderer, Plugin } from "@notion-render/client";
import type { CodeBlockObjectResponse } from "@notionhq/client/build/src/api-endpoints";
import Prism from "prismjs";

// Languages
import "prismjs/components/prism-javascript";
import "prismjs/components/prism-typescript";
import "prismjs/components/prism-python";
import "prismjs/components/prism-bash";

// Styles
import "prismjs/themes/prism-tomorrow.css";

// Optional configuration for future enhancements
type Config = Record<string, unknown>;

const codeBlockRenderer = (options: Config) =>
  createBlockRenderer<CodeBlockObjectResponse>(
    "code",
    async (data, renderer) => {
      // Render the rich text content from Notion
      const code = await renderer.render(...data.code.rich_text);

      // Use PrismJS to highlight the code based on the language
      const language = Prism.languages[data.code.language]
        ? data.code.language
        : "markup"; // Fallback to 'markup' if language is not supported

      const highlightedCode = Prism.highlight(
        code,
        Prism.languages[language],
        language
      );

      return `
        <div>
            <pre><code class="language-${language}">${highlightedCode}</code></pre>
            ${
              data.code.caption.length > 1
                ? `<legend>${await renderer.render(
                    ...data.code.caption
                  )}</legend>`
                : ""
            }
        </div>
      `;
    }
  );

// Define the PrismJS plugin for notion-render
const prismPlugin: Plugin<Config> = (options) => ({
  renderers: [codeBlockRenderer(options)],
  extensions: [],
});

export default prismPlugin;

[test] using deepseek-r1 on your computer…

…but you have a weak gpu and there’s no way you can buy a better one without breaking the bank :,)

#!/bin/bash

ollama run deepseek-r1:7b

video plugin

here’s the other plugin i worked on:

import { createBlockRenderer, Plugin } from "@notion-render/client";
import type { VideoBlockObjectResponse } from "@notionhq/client/build/src/api-endpoints";

// Optional configuration for future enhancements
type Config = Record<string, unknown>;

const videoBlockRenderer = (options: Config) =>
  createBlockRenderer<VideoBlockObjectResponse>(
    "video",
    async (data, renderer) => {
      const caption = await renderer.render(...data.video.caption);
      const url =
        data.video.type === "file"
          ? data.video.file.url
          : data.video.external.url;

      return `
        <video controls>
            <source src=${url} type="video/webm" alt=${caption} />
            <p>
                Your browser doesn't support HTML video. Here is a
                <a href=${url} download=${url} alt=${caption}>link to the video</a> instead.
            </p>
        </video>
      `;
    }
  );

const videoPlugin: Plugin<Config> = (options) => ({
  renderers: [videoBlockRenderer(options)],
  extensions: [],
});

export default videoPlugin;

[test] llms for beginners

(or people who forgot about them)