pages._explore-components-presentational-code.title

pages._explore.sections.basic-usage.title

javascript

console.log('Hello World')

html

<Code 
    code="console.log('Hello World')" 
    language="javascript" 
/>

typescript

<script setup lang="ts">

</script>

Language Support

typescript

const message: string = 'Hello TypeScript';

html

<div class='hello'>HTML Content</div>

css

.button { background: blue; color: white; }

json

{"name": "example", "version": "1.0.0"}

html

<div class="space-y-4">
    <Code 
        code="const message = 'Hello TypeScript';" 
        :language="supportedCodeLanguages.typescript" 
    />
    <Code 
        code="<div class='hello'>HTML Content</div>" 
        :language="supportedCodeLanguages.html" 
    />
    <Code 
        code=".button { background: blue; }" 
        :language="supportedCodeLanguages.css" 
    />
    <Code 
        code='{"name": "example", "version": "1.0.0"}' 
        :language="supportedCodeLanguages.json" 
    />
</div>

typescript

<script setup lang="ts">
import { supportedCodeLanguages } from '#core-types/composables/utils/code-highlight'
</script>

Code Features

example.js

function example() {
  const lines = [1, 2, 3];
  return lines.map(n => n * 2);
}

javascript

const longCode = 'This is a very long piece of code that will exceed the maximum height and should show a scrollbar when it gets very long.';
// Line 2
// Line 3
// Line 4
// Line 5
// Line 6
// Line 7
// Line 8
// Line 9
// Line 10
// Line 11
// Line 12
// Line 13
// Line 14
// Line 15

html

<div class="space-y-4">
    <Code 
        code="function example() {
  const lines = [1, 2, 3];
  return lines.map(n => n * 2);
}" 
        language="javascript"
        title="example.js"
        :show-line-numbers="true"
        :show-copy-button="true"
    />
    
    <Code 
        code="const longCode = 'This is a very long piece of code that will exceed the maximum height and should show a scrollbar when it gets very long. Line 1
Line 2
Line 3
Line 4
Line 5
Line 6
Line 7
Line 8
Line 9
Line 10
Line 11
Line 12
Line 13
Line 14
Line 15';" 
        language="javascript"
        max-height="200px"
        :show-line-numbers="true"
    />
</div>

typescript

<script setup lang="ts">

</script>

Theme Variations

GitHub Theme (Default)

const darkExample = 'GitHub theme example';

Dracula Theme

const draculaExample = 'Dracula theme example';

Monokai Theme

const monokaiExample = 'Monokai theme example';

html

<div class="space-y-4">
    <Code 
        code="const darkExample = 'Dark theme example';" 
        language="javascript"
        title="Dark Theme"
        :dark-theme="supportedCodeThemes['github-dark']"
        :light-theme="supportedCodeThemes['github-light']"
    />
    
    <Code 
        code="const draculaExample = 'Dracula theme example';" 
        language="javascript"
        title="Dracula Theme"
        :dark-theme="supportedCodeThemes.dracula"
        :light-theme="supportedCodeThemes['github-light']"
    />
    
    <Code 
        code="const monokaiExample = 'Monokai theme example';" 
        language="javascript"
        title="Monokai Theme"
        :dark-theme="supportedCodeThemes.monokai"
        :light-theme="supportedCodeThemes['github-light']"
    />
</div>

typescript

<script setup lang="ts">
import { supportedCodeThemes } from '#core-types/composables/utils/code-highlight'
</script>

pages._explore.sections.complex-usage.title

MyComponent.vue

import { ref, computed } from 'vue'
export default defineComponent({
  name: 'MyComponent',
  setup() {
    const message = ref('Hello Vue 3!')
    
    const computedMessage = computed(() => {
      return `Computed: ${message.value}`
    })
    
    return {
      message,
      computedMessage
    }
  }
})

html

<Code 
    code="import { ref, computed } from 'vue'

export default defineComponent({
  name: 'MyComponent',
  setup() {
    const message = ref('Hello Vue 3!')
    
    const computedMessage = computed(() => {
      return `Computed: ${message.value}`
    })
    
    return {
      message,
      computedMessage
    }
  }
})" 
    :language="supportedCodeLanguages.typescript"
    title="MyComponent.vue"
    :show-line-numbers="true"
    :show-copy-button="true"
    max-height="400px"
    copy-text="Copy Vue Code"
    copied-text="Vue Code Copied!"
    :copy-text-translatable="false"
    :lazy="false"
/>

typescript

<script setup lang="ts">
import { supportedCodeLanguages } from '#core-types/composables/utils/code-highlight'
</script>

pages._explore.sections.props.title

Prop	Default	Type
code	""	string
language	supportedCodeLanguages.vue	supportedCodeLanguages
lightTheme	supportedCodeThemes["github-light"]	supportedCodeThemes
darkTheme	supportedCodeThemes["github-dark"]	supportedCodeThemes
lazy	true	boolean
showLineNumbers	false	boolean
showCopyButton	true	boolean
title	""	string
maxHeight	"500px"	string
containerClasses	""	string
copyText	"components.code.copyText"	string
copiedText	"components.code.copiedText"	string
copyTextTranslatable	true	boolean

pages._explore.sections.types.title

Name	Type	Options
supportedCodeLanguages	enum	javascript \| typescript \| vue \| html \| css \| scss \| json \| markdown \| bash \| shell \| python \| java \| go \| rust \| php \| sql
supportedCodeThemes	enum	github-dark \| github-light \| dracula \| monokai \| nord \| one-dark-pro \| tokyo-night \| dark-plus \| material-theme-palenight