feat: code snippets passed as props to Example.vue

Author: igorMSoares

docs/.vitepress/components/CodeSnippet.vue

@@ -6,27 +6,58 @@
     code: String,
     lang: String,
     langs: Array,
+    snippetId: String,
+    highlight: Array,
   });
 
-  const code = props.code ?? '';
-  const { lang = 'js', langs = ['javascript'] } = props;
+  const {
+    code = '',
+    lang = 'js',
+    langs = ['javascript'],
+    snippetId = '',
+    highlight = [],
+  } = props;
 
   onMounted(() => {
     setCDN('https://unpkg.com/shiki/');
     // @ts-ignore
     getHighlighter({ theme: 'material-palenight', langs: langs }).then(
       highlighter => {
-        const snippet = highlighter.codeToHtml(code, { lang: lang });
+        let lineOptions = [];
+        highlight.forEach(lineNumber => {
+          if (typeof lineNumber === 'string') {
+            const range = lineNumber.match(/\d+/g);
+            if (range) {
+              for (let i = +range[0]; i <= +range[1]; i++) {
+                lineOptions.push({
+                  line: i,
+                  classes: ['highlighted'],
+                });
+              }
+            }
+          } else if (typeof lineNumber === 'number') {
+            lineOptions.push({
+              line: lineNumber,
+              classes: ['highlighted'],
+            });
+          }
+        });
+
+        const snippet = highlighter.codeToHtml(code, {
+          lang: lang,
+          lineOptions: lineOptions,
+        });
+
         // @ts-ignore
-        document.querySelector('.shiki-code').innerHTML = snippet;
-        document.querySelector('.code-snippet pre')?.removeAttribute('style');
+        document.querySelector(`#${snippetId} .shiki-code`).innerHTML = snippet;
+        document.querySelector(`#${snippetId} pre`)?.removeAttribute('style');
       }
     );
   });
 </script>
 
 <template>
-  <div class="code-snippet language-js">
+  <div :id="snippetId" class="code-snippet" :class="`language-${lang}`">
     <button title="Copy Code" class="copy"></button>
     <span class="lang">{{ lang }}</span>
     <div class="shiki-code"></div>

docs/.vitepress/components/Example.vue

@@ -3,6 +3,7 @@
   import Button from './Button.vue';
   import Content from './Content.vue';
   import AnimationForm from './AnimationForm.vue';
+  import CodeSnippet from './CodeSnippet.vue';
 
   defineEmits(['resetAnimation']);
 </script>
@@ -18,6 +19,7 @@
       contentList: Array,
       animOpts: Object,
       fieldsList: Array,
+      codeSnippet: Array,
     },
     mounted() {
       const jsCssAnimations = this.animationApi();
@@ -67,6 +69,15 @@
     />
 
     <section>
+      <CodeSnippet
+        v-if="codeSnippet"
+        v-for="(snippet, i) in codeSnippet"
+        :snippet-id="`code-snippet__${animationName}-${i}`"
+        :code="snippet.code"
+        :highlight="snippet.highlight"
+        :langs="snippet.langs"
+        :lang="snippet.lang"
+      />
       <slot />
     </section>
   </Container>

docs/examples/index.md

@@ -116,11 +116,6 @@ aside: false
   function animationApi() {
     return jsCssAnimations;
   }
-
-  const snippet = `
-    jsCssAnimations.init.slideDown({maintainSpace: true});
-  `
-
 </script>
 
 # Examples
@@ -134,12 +129,9 @@ aside: false
 :content-list="examples.slide.contentList"
 :anim-opts="{}"
 @reset-animation="(opts) => {resetAnimation('slide', opts);}"
-:fields-list="['duration', 'delay', 'staggerDelay', 'maintainSpace', 'easing', 'dimensionsTransition', 'overflowHidden']">
-
-<CodeSnippet :code="snippet" />
-
-<!-- ```js{4}
-jsCssAnimations.init.slideUp({
+:fields-list="['duration', 'delay', 'staggerDelay', 'maintainSpace', 'easing', 'dimensionsTransition', 'overflowHidden']"
+:code-snippet="[{
+code: `jsCssAnimations.init.slideUp({
   trigger: '.slide-up--btn',
   targetSelector: '.example__slide',
   on: 'click', // This is the default value, so it can be ommited
@@ -155,10 +147,10 @@ jsCssAnimations.init.slideLeft({
 jsCssAnimations.init.slideRight({
   trigger: '.slide-right--btn',
   targetSelector: '.example__slide',
-});
-``` -->
-
-</Example>
+});`,
+highlight: [4]
+}]"
+/>
 
 <Example
 :animation-api="animationApi"
@@ -169,23 +161,23 @@ jsCssAnimations.init.slideRight({
 :content-list="examples.fade.contentList"
 :anim-opts="fadeOpts"
 :fields-list="['duration', 'delay', 'staggerDelay', 'maintainSpace', 'easing', 'blur', 'dimensionsTransition', 'iteration', 'direction']"
-@reset-animation="(opts) => {resetAnimation('fade', opts);}">
+@reset-animation="(opts) => {resetAnimation('fade', opts);}"
+:code-snippet="[{
+code: `// When 'trigger' option is omitted, .init will look for
+// any element(s) that have the 'js-anim--trigger' class
+jsCssAnimations.init.fade({
+  maintainSpace: true,
+});`,
+highlight: [4],
+}]">
 
 ```html{1}
 <button class="js-anim--trigger" target-selector=".fade__example">
-  Fade In/Out
+  Fade Out
 </button>
 <div class="fade__example"><p>...</p></div>
 ```
 
-```js{4}
-// When 'trigger' option is omitted, .init will look for
-// any element(s) that have the 'js-anim--trigger' class
-jsCssAnimations.init.fade({
-  maintainSpace: true,
-});
-```
-
 </Example>
 
 <Example
@@ -197,17 +189,16 @@ jsCssAnimations.init.fade({
 :content-list="examples.collapse.contentList"
 :anim-opts="collapseOpts"
 :fields-list="['duration', 'delay', 'staggerDelay', 'maintainSpace', 'easing', 'dimensionsTransition', 'transfOrigin']"
-@reset-animation="(opts) => {resetAnimation('collapse', opts);}">
-
-```js{4}
-jsCssAnimations.init.collapse({
+@reset-animation="(opts) => {resetAnimation('collapse', opts);}"
+:code-snippet="[{
+code: `jsCssAnimations.init.collapse({
   trigger: '.collapse--btn',
   targetSelector: '.example__collapse',
   staggerDelay: 500, // '0.5s' or '500ms' would also work
 });
-```
-
-</Example>
+`,
+highlight: [4]
+}]"/>
 
 <style>
 </style>