N
Nuxt•3mo ago
Ress

How to create custom text content transformer for Nuxt content v3?

How to create custom text content formatter / hightlight in Nuxt content v3? I see hook 'content:file:beforeParse' https://content.nuxt.com/docs/advanced/hooks But don't understand how to use it, where and how declare
Nuxt Content
Hooks - Nuxt Content
Modify your content using Nuxt build time hooks
4 Replies
kapa.ai
kapa.ai•3mo ago
Hi @Ress. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To create a custom text content transformer or formatter/highlighter in Nuxt Content v3, you can use the content:file:beforeParse hook. This hook allows you to modify the raw content before it's parsed. Here's how you can use it: 1. First, you need to define the hook in your nuxt.config.ts file: 
import type { FileBeforeParseHook } from '@nuxt/content'

export default defineNuxtConfig({
  hooks: {
    'content:file:beforeParse': (ctx: FileBeforeParseHook) => {
      // Your custom transformation logic goes here
    }
  }
})
import type { FileBeforeParseHook } from '@nuxt/content'

export default defineNuxtConfig({
  hooks: {
    'content:file:beforeParse': (ctx: FileBeforeParseHook) => {
      // Your custom transformation logic goes here
    }
  }
})
2. Inside the hook function, you can access and modify the content before it's parsed. The ctx object provides you with information about the file and allows you to modify its content. Here's an example of how you might use this hook to add custom formatting: 
import type { FileBeforeParseHook } from '@nuxt/content'

export default defineNuxtConfig({
  hooks: {
    'content:file:beforeParse': (ctx: FileBeforeParseHook) => {
      // Check if the file is markdown
      if (ctx.file.extension === '.md') {
        // Replace custom syntax with HTML
        ctx.content = ctx.content.replace(/::highlight{(.+?)}/g, '<span class="highlight">$1</span>')
      }
    }
  }
})
import type { FileBeforeParseHook } from '@nuxt/content'

export default defineNuxtConfig({
  hooks: {
    'content:file:beforeParse': (ctx: FileBeforeParseHook) => {
      // Check if the file is markdown
      if (ctx.file.extension === '.md') {
        // Replace custom syntax with HTML
        ctx.content = ctx.content.replace(/::highlight{(.+?)}/g, '<span class="highlight">$1</span>')
      }
    }
  }
})
In this example, we're replacing a custom syntax ::highlight{text} with an HTML span element with a "highlight" class. You can define any custom transformation logic you need within this hook. Remember that this hook is called before the content is parsed, so you're working with the raw string content at this point. If you need to modify the parsed content, you might want to use the content:file:afterParse hook instead. For more information on hooks in Nuxt Content, you can refer to the Hooks documentation. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•3mo ago
<@328509260143001601> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
Ress
RessOP•3mo ago
No, it not working.. 
    hooks: {
        'content:file:beforeParse': (ctx: FileBeforeParseHook) => {
          // Check if the file is markdown
          if (ctx.file.extension === '.md') {
            // Replace custom syntax with HTML
            ctx.content = ctx.content.replace(/::the{(.+?)}/g, '<strong>$1</strong>')
          }
        }
      },
    hooks: {
        'content:file:beforeParse': (ctx: FileBeforeParseHook) => {
          // Check if the file is markdown
          if (ctx.file.extension === '.md') {
            // Replace custom syntax with HTML
            ctx.content = ctx.content.replace(/::the{(.+?)}/g, '<strong>$1</strong>')
          }
        }
      },
Mittchel
Mittchel•3mo ago
export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.hook('content:file:beforeParse', (content) => {
    const codeRegex = /\`\`\`(.*?)\`\`\`/gms; 
    content = content.replace(codeRegex, (match, language) => {
      const highlightedCode = syntaxHighlight(match.slice(3, -3), language); 
      return \`<pre class="language-${language}">${highlightedCode}</pre>\`;
    });

    return content;
  });
});
export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.hook('content:file:beforeParse', (content) => {
    const codeRegex = /\`\`\`(.*?)\`\`\`/gms; 
    content = content.replace(codeRegex, (match, language) => {
      const highlightedCode = syntaxHighlight(match.slice(3, -3), language); 
      return \`<pre class="language-${language}">${highlightedCode}</pre>\`;
    });

    return content;
  });
});

Did you find this page helpful?