Is there an easy way to get a word count?

[jeremy-rifkin]

Hi, I'm using vitepress for a blog and I'd like to show a word count and estimated time to read. Is there an easy way to get the word count from a markdown page with vitepress?

Cheers

[brc-dd]

Maybe something like this: 👀

https://stackblitz.com/edit/vite-f2qsfsp4?file=docs/.vitepress/theme/WordCount.vue

There is this plugin too - https://github.com/nolebase/integrations/tree/main/packages/vitepress-plugin-page-properties

But the docs aren't completed yet. You might be able to refer their docs implementation instead.

[jeremy-rifkin]

Thanks for the links! I’d definitely prefer to do this at static generation time rather than on page load. It looks like the second link does this by doing its own load and parse of the markdown file, which I’d like to avoid as well. (Especially given markdown plugins vitepress introduces and plugins I might add to that)

[brc-dd]

Another way is to inject this using transformPageData hook. You will need to read the markdown file -> strip markdown to get text -> count words in that text. markdown to text part will become tricky depending on the features you're using.

[jeremy-rifkin]

Thanks for the thought, transformPageData might be the way to go. I am thinking I can get the markdown parser object from setup too and so I would be able to use the same parser as the page uses. I’ll follow up when I give it a try.

[brc-dd]

https://stackblitz.com/edit/vite-gzad8mrr?file=docs/.vitepress/config.ts,docs/.vitepress/theme/WordCount.vue,docs/.vitepress/theme/Layout.vue this is probably simpler 👀

import { defineConfig } from 'vitepress';

export default defineConfig({
  markdown: {
    config(md) {
      const orig = md.render;
      md.render = function (src, env) {
        const result = orig.call(this, src, env);
        env.frontmatter.wordCount = getWordCount(result);
        return result;
      };
    },
  },
});

function getWordCount(htmlString: string): number {
  // use cheerio or something else for more robust parsing
  return htmlString
    .replace(/<[^>]*>/g, ' ')
    .split(/\s+/)
    .filter((word) => word.length > 0)
    .length;
}

<script setup lang="ts">
import { useData } from 'vitepress';

const { frontmatter } = useData();
</script>

<template>
  <div class="word-count">
    <span>Word Count:</span> {{ frontmatter.wordCount }}
  </div>
</template>

[jeremy-rifkin]

Thanks, great ideas! I ended up going with the md.render = ... approach. This has been super helpful, thanks so much!