Auto Transform Code Blocks

# Auto Transforming Obsidian Code Blocks In some of my [[Embedding Neovim HTML into Obsidian|previous posts]], we talked about how I transformed code blocks via Neovim to highlighted code blocks exactly like my Neovim configuration. The output is an **exact** match of my Neovim highlighting, with all of the colors, styles and even warnings and diagnostics directly copied into HTML which can be used to display in this blog. But, I had a problem. Even with ways to quickly add, edit, and update code blocks to use my Neovim highlighting, sometimes I would want to write something in pure Markdown and then instantly convert all the code blocks in my document to the Neovim highlighting. This wasn't too much of a hassle - copy the text, run my `Generate new NEOVIM INCLUDE` command from inside Obsidian, paste the text inside the opened Neovim, and then save and quit (which is quit difficult for some people). But, I had a problem. I'm a programmer! I don't want to do the same thing twice, let alone three times! Or even worse, N times!! So, I had a solution. I would continue to extend my [Obsidian plugin](https://github.com/tjdevries/obsidian-include-code) to be able to automatically transform all of the code blocks that are "regular code" into my "Neovim include" style. # Usage Here's an example of me actually what you're about to read on this very article! A little bit meta :) ![[auto-transform-code-blocks-example.mp4]] # Implementation The first thing I did was to add a new command to my Obsidian Plugin. This is really easy, it just involves registering a new command in the `onload` for a Plugin. ```neovim {"update":true,"path":"_/code/17242693352805.ts","timestamp":1725473857406} <pre> async onload() { // ... other plugin code ... this.addCommand({ id: "transform-to-neovim-blocks", name: "Transform all code blocks to neovim blocks", callback: () => { this.transformAllCodeBlocksToNeovimBlocks(); }, }); } </pre> ``` ^17242693352805 The command code is relatively straightforward as well, and is effectively put into three main sections: 1. Find all codeblocks that are not of type `neovim` (my special codeblock for Neovim highlighted code) 2. Create a file with the contents of the codeblock, and then replace the codeblock with an un-updated Neovim codeblock. 3. Update all the Neovim codeblocks in the file. ## Implementation: Find all codeblocks Fortunately, Obsidian's API is very good, so it's quite easy to get all of the different Markdown "sections" in a file. A "section" is (to my understanding) defined as more-or-less anything that is a distinct Markdown element: header, paragraph, codeblock, etc. For us, we're only interested in codeblocks that are not of type `neovim`. This code: 1. Gets the only the `"code"` sections 2. Skips if the first line contains `"neovim"` (since the first line of the block is the header) 3. Adds them to our `toTransform` array. ```neovim {"update":true,"path":"_/code/17242693352794.ts","timestamp":1725473857073} <pre> const contents = await this.app.vault.read(file); const lines: string[] = contents.split("\n"); const activeFile = this.app.workspace.getActiveFile()!; const fileCache = this.app.metadataCache.getFileCache(activeFile)!; const sections = fileCache.sections!; const toTransform = []; for (const s of sections) { if (s.type === "code") { const first_line = lines[s.position.start.line]; if (first_line.includes("neovim")) { continue; } toTransform.push(s); } } </pre> ``` ^17242693352794 The reason we are keeping them in an array is because they are sorted top-to-bottom. This means, after pushing the elements into the array, we can just reverse it to modify the lines in place (nothing in the last code block will change any of the positions of the first code block)! ```neovim {"update":true,"path":"_/code/17242693352783.ts","timestamp":1725473856763} <pre> // Go back to front so we can modify lines toTransform.reverse(); </pre> ``` ^17242693352783 ## Implementation: Creating Files and Codeblocks Now we iterate through each of the sections that we want to transform (remember, in reverse). After getting the extension of the markdown block and it's contents, we create a new file that goes int `_/code/<filename>.<extension>`. The reason I do this is because I love the [[File over App]] philosophy of Obsidian - even though for now I want to store all of the code blocks directly as formatted HTML in my Markdown documents, maybe someday I will want to recover all of the original files. Or even just update the colors on everything! If I didn't keep the original source files, then I wouldn't be able to do that. So I create the file in this ignored folder `_/code/` in my Obsidian vault and then populate it with whatever was inside of the original codeblock. Then I get the new Neovim codeblock lines (which is basically just a codeblock with type `neovim` and some additional metadata saved within the file so that I can update and reload it later), and splice those into the original `lines` of the file. Since we're going in reverse, these start and end lines never need to get updated while iterating. ```neovim {"update":true,"path":"_/code/17242693352782.ts","timestamp":1725473856422} <pre> let i = 0; for (const s of toTransform) { const first_line = lines[s.position.start.line]; const extension = filetypeToExtension( first_line.slice(first_line.indexOf("```") + 3).trim(), ); const blockContents = lines .slice(s.position.start.line + 1, s.position.end.line) .join("\n"); const now = `${Date.now()}{i}`; const newFileName = `${now}.${extension}`; await this.app.vault.create(`_/code/${newFileName}`, blockContents); const newLines = this.getNeovimBlockLines(now, newFileName, config); // Replace the lines lines.splice( s.position.start.line, s.position.end.line - s.position.start.line + 1, ...newLines, ); i += 1; } </pre> ``` ^17242693352782 (here's the Neovim Block lines function if you are interested) ```neovim {"update":true,"path":"_/code/17242693352771.ts","timestamp":1725473856102} <pre> getNeovimBlockLines( id: string, file: string, config: NeovimIncludeConfig, ): string[] { return [ `${NEOVIM_START_FLAG} ${file} ${JSON.stringify(config)} %%`, "```neovim", "```", `^${id}`, ]; } </pre> ``` ^17242693352771 ## Implementation: Updating File Lastly, we just replace the contents of the file with our updated lines and then call the function I had already written in the earlier blog post to find all of the `neovim` codeblocks and update them. This function opens Neovim, runs a Lua plugin that emits the HTML which displays the highlighting for the file and then exits. Once we have the highlights, we apply those to each codeblock and then save the file again. ```neovim {"update":true,"path":"_/code/17242693352760.ts","timestamp":1725473855792} <pre> this.app.vault.modify(file, lines.join("\n")); await this.updateNeovimHighlightBlocksCommand(); </pre> ``` ^17242693352760 This made it really easy to re-use all of the work that I had already done for actually updating the code blocks from existing files! # Conclusion Obsidian is really fun and cool :) And Obsidian Publish is great too :) This isn't an ad, but @kepano if you're reading this I would be happy to make it one! haha Thanks everyone!