write all your blog posts and notes inside the 📁 /content/article folder

The block code highlight engine is Shiki, and it provides a lot of themes to highlight code.

The default highlight theme in BlogiNote is one-dark-pro, you can change it at the nuxt.config.ts file, by setting the theme property.

For example I want to set the highlight theme to github-dark:

export default defineNuxtConfig({
  content: {
    highlight: {
      theme: 'github-dark'
    }
  }
})

The block code highlight engine is Shiki, it supports to highlight hundreds of program languages.

BlogiNote has preload some common program languages in advance, to make the relative block code highlight correctly.

The 11 preload program languages by default:

• 'diff'
• 'json'
• 'js'
• 'ts'
• 'css'
• 'shell'
• 'html'
• 'md'
• 'yaml'
• 'vue'
• 'python'

If you want to write a code block which doesn't belong to any default program languages list above, you should add these program languages to the nuxt.config.ts file first, by setting the preload property.

For example I want to write a code block by using the ssh-config program language.

Firstly, I should make sure that Shiki support this program language in this page.

Then I the configuration file as below:

export default defineNuxtConfig({
  content: {
    highlight: {
      preload: ['ssh-config']
    }
  }
})

If you want to write block code using the program language which don't support by Shiki, you can set the block code program language to md or markdown as a fallback solution.

But this solution has a little flaw, the md or markdown tag will show at the top-right corner of the code block, it maybe confuse your readers.

But you can fix it in a trick way, by providing the source message of the code at the same time, and the value contains the file extension information.

For example I want to write some plain text in the code block, but I have to set the program language as md because the Shiki don't support to highlight the .txt content.

But I can provide the source message [introduction.txt] at the same time

The code block show below with highlight and correct program language information:

Thanks a lot to use BlogiNote

You can change the logo at the left side of the header navbar, and the icon of your webpage in the browser tab.

Add you logo image file to the 📁 /public folder, and configure the avatar property in the app.config.ts file.

Add you icon image file to the 📁 /public folder, and configure the favicon property in the app.config.ts file.

export default defineAppConfig({
  theme: {
    // for example you add a image named avatar.png to public folder as the logo
    avatar: 'avatar.png',
    // add a image named favicon.ico to public folder as the icon of your webpage
    favicon: 'favicon.ico',
  }
})

If you want to update or migrate your blog, you should backup your data first.

Your data created by yourself are inside the follow folders:

• all of the articles you write is inside the 📁 /content/article folder.
• the 📁 /public folder may be contain some images you uploaded.

Stay tuned for the version change of the BlogiNote homepage at npm.

If there's any new version released, you can change the version of bloginote at the package.json file in your project to make an update.

{
  "devDependencies": {
    "bloginote": "3.1.0",
    "nuxt": "3.3.2"
  }
}

{
  "scripts": {
    "dev": "nuxi dev",
    "build": "nuxi build",
    "generate": "nuxt generate && npx pagefind --source dist",
    "preview": "nuxi preview",
    "lint": "eslint ."
  },
}

export default defineAppConfig({
  bloginote: {
    // ...
  }
})