📝 Add codeblock title for filename

Author: lambdalisue

assets/codeblock-title.css

@@ -0,0 +1,8 @@
+.codeblock-title {
+  display: block;
+  margin: 0;
+  padding: 0.5em 1em;
+  font-size: 0.9em;
+  color: color-mix(in srgb, var(--fg), #777 50%);
+  background-color: color-mix(in srgb, var(--bg), #777 20%);
+}

assets/codeblock-title.js

@@ -0,0 +1,15 @@
+document.addEventListener("DOMContentLoaded", () => {
+  const codeblocks = document.querySelectorAll("pre code");
+  codeblocks.forEach((codeblock) => {
+    const found = [...codeblock.classList.values()].find((v) =>
+      v.startsWith("title=")
+    );
+    if (found) {
+      const title = found.replace(/^title=/, "");
+      const titleElement = document.createElement("header");
+      titleElement.classList.add("codeblock-title");
+      titleElement.textContent = title;
+      codeblock.parentNode.prepend(titleElement, codeblock);
+    }
+  });
+});

book.toml

@@ -7,5 +7,7 @@ title = "Denops Documentation"
 
 [output.html]
 default-theme = "coal"
+additional-js = ["assets/codeblock-title.js"]
+additional-css = ["assets/codeblock-title.css"]
 
 [preprocessor.alerts]

src/getting-started/README.md

@@ -21,7 +21,7 @@ $HOME
 
 Next, write the following TypeScript code in `main.ts`:
 
-```typescript:denops/denops-getting-started/main.ts
+```typescript,title=denops/denops-getting-started/main.ts
 import type { Entrypoint } from "jsr:@denops/[email protected]";
 
 export const main: Entrypoint = (denops) => {
@@ -38,13 +38,13 @@ export const main: Entrypoint = (denops) => {
 Add the following line to your Vim or Neovim configuration file (e.g.,
 `~/.vimrc` or `~/.config/nvim/init.vim`):
 
-```vim
+```vim,title=~/.vimrc
 set runtimepath+=~/denops-getting-started
 ```
 
 Or Neovim Lua configuration file (e.g., `~/.config/nvim/init.lua`):
 
-```lua
+```lua,title=~/.config/nvim/init.lua
 vim.opt.runtimepath:append("~/denops-getting-started")
 ```
 

src/tutorial/helloworld/adding-an-api.md

@@ -6,7 +6,7 @@ will enhance the plugin by adding an API.
 Open `denops/denops-helloworld/main.ts` and rewrite the content with the
 following code:
 
-```typescript:denops/denops-helloworld/main.ts
+```typescript,title=denops/denops-helloworld/main.ts
 import type { Entrypoint } from "jsr:@denops/[email protected]";
 import { assert, is } from "jsr:@core/[email protected]";
 

src/tutorial/helloworld/calling-vim-features.md

@@ -4,7 +4,7 @@ If you want to use a Vim feature from your Denops plugin, you can call it via
 the `denops` instance passed to the plugin's `main` function. You can rewrite
 `main.ts` as follows to register the `DenopsHello` as a Vim command:
 
-```ts:denops/denops-helloworld/main.ts
+```typescript,title=denops/denops-helloworld/main.ts
 import type { Entrypoint } from "jsr:@denops/[email protected]";
 import { assert, is } from "jsr:@core/[email protected]";
 
@@ -29,7 +29,7 @@ export const main: Entrypoint = (denops) => {
 Then, rewrite `plugin/denops-helloworld.vim` to automatically call the `init`
 API on plugin load via the `DenopsPluginPost:{plugin_name}` autocmd:
 
-```vim:plugin/denops-helloworld.vim
+```vim,title=plugin/denops-helloworld.vim
 if exists('g:loaded_denops_helloworld')
   finish
 endif

src/tutorial/helloworld/creating-a-minimal-denops-plugin.md

@@ -31,7 +31,7 @@ denops-helloworld
 
 Here is the content of the `denops/denops-helloworld/main.ts` file:
 
-```typescript:denops/denops-helloworld/main.ts
+```typescript,title=denops/denops-helloworld/main.ts
 import type { Entrypoint } from "jsr:@denops/[email protected]";
 
 export const main: Entrypoint = (denops) => {

src/tutorial/helloworld/creating-a-minimal-vim-plugin.md

@@ -13,7 +13,7 @@ denops-helloworld
 
 The content of the `plugin/denops-helloworld.vim` file is as follows:
 
-```vim:plugin/denops-helloworld.vim
+```vim,title=plugin/denops-helloworld.vim
 if exists('g:loaded_denops_helloworld')
   finish
 endif
@@ -45,13 +45,13 @@ Upon startup, Vim searches and loads files named `plugin/*.vim` in directories
 specified in `runtimepath`. To activate the plugin, add the following line to
 your Vim configuration file (e.g., `~/.vimrc` or `~/.config/nvim/init.vim`):
 
-```vim
+```vim,title=~/.vimrc
 set runtimepath+=~/denops-helloworld
 ```
 
 For Neovim's Lua configuration file (e.g., `~/.config/nvim/init.lua`), use:
 
-```lua
+```lua,title=~/.config/nvim/init.lua
 vim.opt.runtimepath:append("~/denops-helloworld")
 ```
 

src/tutorial/maze/adjusting-maze-size-to-fit-the-window.md

@@ -7,7 +7,7 @@ to have a maze that fits the current window size.
 Let's modify the plugin to ensure the generated maze fits the current window
 size.
 
-```typescript:denops/denops-helloworld/main.ts
+```typescript,title=denops/denops-helloworld/main.ts
 import type { Entrypoint } from "jsr:@denops/[email protected]";
 import * as fn from "jsr:@denops/[email protected]/function";
 import { Maze } from "npm:@thewizardbear/[email protected]";

src/tutorial/maze/creating-applicative-plugin.md

@@ -11,7 +11,7 @@ the maze plugin that will satisfy your crazy addictive maze solver friend.
 First, modify `plugin/denops-maze.vim` to accept the `Maze` command with an
 optional argument.
 
-```vim:plugin/denops-maze.vim
+```vim,title=plugin/denops-maze.vim
 if exists('g:loaded_denops_maze')
   finish
 endif
@@ -32,7 +32,7 @@ Then, modify the `main.ts` file to accept the optional argument for a custom
 opener, generate a maze that fits the current window size, configure the buffer
 options to make it non-file readonly buffer, etc.
 
-```ts:denops/denops-maze/main.ts
+```typescript,title=denops/denops-maze/main.ts
 import type { Entrypoint } from "jsr:@denops/[email protected]";
 import { batch, collect } from "jsr:@denops/[email protected]/batch";
 import * as fn from "jsr:@denops/[email protected]/function";