Commit 75dd860

committed

feat: <WIP> create CodeSnippet component

1 parent 1380df7 commit 75dd860Copy full SHA for 75dd860

File tree

+43

-2

lines changed

+43

-2

lines changed

Lines changed: 34 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,34 @@`
	`1`	`+<script setup>`
	`2`	`+ import { getHighlighter, setCDN } from 'shiki';`
	`3`	`+ import { onMounted } from 'vue';`
	`4`	`+`
	`5`	`+ const props = defineProps({`
	`6`	`+ code: String,`
	`7`	`+ lang: String,`
	`8`	`+ langs: Array,`
	`9`	`+ });`
	`10`	`+`
	`11`	`+ const code = props.code ?? '';`
	`12`	`+ const { lang = 'js', langs = ['javascript'] } = props;`
	`13`	`+`
	`14`	`+ onMounted(() => {`
	`15`	`+ setCDN('https://unpkg.com/shiki/');`
	`16`	`+ // @ts-ignore`
	`17`	`+ getHighlighter({ theme: 'material-palenight', langs: langs }).then(`
	`18`	`+ highlighter => {`
	`19`	`+ const snippet = highlighter.codeToHtml(code, { lang: lang });`
	`20`	`+ // @ts-ignore`
	`21`	`+ document.querySelector('.shiki-code').innerHTML = snippet;`
	`22`	`+ document.querySelector('.code-snippet pre')?.removeAttribute('style');`
	`23`	`+ }`
	`24`	`+ );`
	`25`	`+ });`
	`26`	`+</script>`
	`27`	`+`
	`28`	`+<template>`
	`29`	`+ <div class="code-snippet language-js">`
	`30`	`+ <button title="Copy Code" class="copy"></button>`
	`31`	`+ <span class="lang">{{ lang }}</span>`
	`32`	`+ <div class="shiki-code"></div>`
	`33`	`+ </div>`
	`34`	`+</template>`

Lines changed: 9 additions & 2 deletions

Original file line number	Diff line number	Diff line change
`@@ -6,6 +6,7 @@ aside: false`
`6`	`6`	`<script setup>`
`7`	`7`	`import { onMounted } from 'vue';`
`8`	`8`	`import Example from '../.vitepress/components/Example.vue'`
	`9`	`+ import CodeSnippet from '../.vitepress/components/CodeSnippet.vue'`
`9`	`10`	`import examples from './examples.json'`
`10`	`11`
`11`	`12`	`import jsCssAnimations from '../../js-css-animations/js-css-animations.js';`
`@@ -116,6 +117,10 @@ aside: false`
`116`	`117`	`return jsCssAnimations;`
`117`	`118`	`}`
`118`	`119`
	`120`	+ const snippet = `
	`121`	`+ jsCssAnimations.init.slideDown({maintainSpace: true});`
	`122`	+ `
	`123`	`+`
`119`	`124`	`</script>`
`120`	`125`
`121`	`126`	`# Examples`
`@@ -131,7 +136,9 @@ aside: false`
`131`	`136`	`@reset-animation="(opts) => {resetAnimation('slide', opts);}"`
`132`	`137`	`:fields-list="['duration', 'delay', 'staggerDelay', 'maintainSpace', 'easing', 'dimensionsTransition', 'overflowHidden']">`
`133`	`138`
`134`		-```js{4}
	`139`	`+<CodeSnippet :code="snippet" />`
	`140`	`+`
	`141`	+<!-- ```js{4}
`135`	`142`	`jsCssAnimations.init.slideUp({`
`136`	`143`	`trigger: '.slide-up--btn',`
`137`	`144`	`targetSelector: '.example__slide',`
`@@ -149,7 +156,7 @@ jsCssAnimations.init.slideRight({`
`149`	`156`	`trigger: '.slide-right--btn',`
`150`	`157`	`targetSelector: '.example__slide',`
`151`	`158`	`});`
`152`		-```
	`159`	+```-->
`153`	`160`
`154`	`161`	`</Example>`
`155`	`162`

Comments

(0)