
Security News
vlt Launches "reproduce": A New Tool Challenging the Limits of Package Provenance
vlt's new "reproduce" tool verifies npm packages against their source code, outperforming traditional provenance adoption in the JavaScript ecosystem.
Nuxt + Shiki syntax highlighter!
[!IMPORTANT] This module is under development!
Add Nuxt module:
npx nuxi module add nuxt-shiki
That's it! You can now use nuxt-shiki in your Nuxt app ✨
Options can be configured using shiki
key in nuxt.config
:
export default defineNuxtConfig({
modules: ['nuxt-shiki'],
shiki: {
/* shiki options */
},
})
Available options:
bundledThemes
and bundledLangs
can be configured to set bundled themes and languages.defaultTheme
and defaultLang
can be configured to set default theme and language.langAlias
can be configured to set language aliases.highlightOptions
can be configured to set highlight defaults.<Shiki>
componentYou can use <Shiki>
component to highlight code in your Vue app:
<template>
<Shiki lang="js" code="console.log('hello');" />
</template>
The component will render a pre
tag with highlighted code inside.
You can use the as
prop to render a different tag:
<template>
<Shiki lang="js" code="console.log('hello');" as="span" />
</template>
If unwrap
prop is set to true
or as
is pre
, it will automatically unwrap the code props to top level.
Additionally you can use highlightOptions
prop to set shiki highlight options.
getShikiHighlighter()
Lazy-load shiki instance.
You can use this utility both in server/
and vue app code.
Example:
<script setup>
const highlighter = await getShikiHighlighter()
const html = highlighter.highlight(`const hello = 'shiki'`, { lang: 'js' })
</script>
Example:
// server/api/highlight.ts
export default defineEventHandler(async (event) => {
const highlighter = await getShikiHighlighter()
return highlighter.highlight(`const hello = 'shiki'`, { lang: 'js' })
})
useShikiHighlighted(code, options)
Return a lazy highlighted code ref (only usable in Vue)
Example:
<script setup>
const code = ref(`const hello = 'shiki'`)
const highlighted = await useShikiHighlighted(code)
</script>
# Install dependencies
npm install
# Generate type stubs
npm run dev:prepare
# Develop with the playground
npm run dev
# Build the playground
npm run dev:build
# Run ESLint
npm run lint
# Run Vitest
npm run test
npm run test:watch
# Release new version
npm run release
v0.3.0
FAQs
Nuxt + Shiki syntax highlighting
The npm package nuxt-shiki receives a total of 967 weekly downloads. As such, nuxt-shiki popularity was classified as not popular.
We found that nuxt-shiki demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
vlt's new "reproduce" tool verifies npm packages against their source code, outperforming traditional provenance adoption in the JavaScript ecosystem.
Research
Security News
Socket researchers uncovered a malicious PyPI package exploiting Deezer’s API to enable coordinated music piracy through API abuse and C2 server control.
Research
The Socket Research Team discovered a malicious npm package, '@ton-wallet/create', stealing cryptocurrency wallet keys from developers and users in the TON ecosystem.