LightCode 代码高亮组件（1.3.5）
通过鼠标或键盘输入字符。
基本用法
使用code属性传入需要高亮显示的代码字符串。
<template>
<div class="container">
<YmLightCode :code="codeStr" width="650px" />
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const codeStr = ref(
`
// 引入所有组件
import YmUI from 'guyan-ym-ui'
// 引入样式
import 'guyan-ym-ui/dist/index.css'
import App from './App.vue'
// 全局使用
createApp(App).use(YmUI).mount('#app')
`
)
</script>
<style scoped>
</style>自定义宽高
可以通过width和height属性自定义组件宽高.
字符串
字符串
百分比
<template>
<div class="container">
<p><h4>字符串</h4></p>
<YmLightCode :code="codeStr" width="650px" height="200px" />
<p><h4>字符串</h4></p>
<YmLightCode :code="codeStr" :width="650" :height="200" />
<p><h4>百分比</h4></p>
<YmLightCode :code="codeStr" width="50%" />
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const codeStr = ref(
`
// 引入所有组件
import YmUI from 'guyan-ym-ui'
// 引入样式
import 'guyan-ym-ui/dist/index.css'
import App from './App.vue'
// 全局使用
createApp(App).use(YmUI).mount('#app')
`
)
</script>
<style scoped>
</style>代码复制
点击按钮复制
实例调用
<template>
<div class="container">
<p><h4>点击按钮复制</h4></p>
<YmLightCode :code="codeStr" width="650px" custom />
<p><h4>实例调用</h4></p>
<YmLightCode :code="codeStr" width="650px" ref="lightCodeRef" />
<p>
<YmButton @click="copyText" type="primary">复制</YmButton>
</p>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { type LightCodeInstance } from 'guyan-ym-ui'
const codeStr = ref(
`
// 引入所有组件
import YmUI from 'guyan-ym-ui'
// 引入样式
import 'guyan-ym-ui/dist/index.css'
import App from './App.vue'
// 全局使用
createApp(App).use(YmUI).mount('#app')
`
)
const lightCodeRef = ref<LightCodeInstance | null>(null)
const copyText = () => {
lightCodeRef.value?.copyCode()
}
</script>
<style scoped>
</style>语言类型
props指定
实例调用
<template>
<div class="container">
<p><h4>props指定</h4></p>
<YmLightCode :code="codeStr1" width="650px" language="c++" />
<p><h4>实例调用</h4></p>
<YmLightCode :code="codeStr2" width="650px" ref="lightCodeRef" />
</div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { type LightCodeInstance, } from 'guyan-ym-ui'
const codeStr1 = ref(
`
#include <iostream>
#include <cstring>
#include <cstdlib>
int global_var = 10; // 初始化的全局变量，存储在数据段 (.data)
static int static_var = 20; // 静态全局变量，存储在数据段 (.data)
const int const_var = 30; // 常量，存储在只读数据段 (.rodata)
void exampleFunction() {
int local_var = 40; // 局部变量，存储在栈区 (stack)
static int static_local = 50; // 静态局部变量，存储在数据段 (.data)
char* dynamic_mem = (char*)malloc(10); // 动态分配内存，存储在堆区 (heap)
std::cout << "局部变量地址: " << &local_var << std::endl;
std::cout << "静态局部变量地址: " << &static_local << std::endl;
std::cout << "动态分配内存地址: " << (void*)dynamic_mem << std::endl;
free(dynamic_mem); // 释放动态内存
}
int main() {
std::cout << "全局变量地址: " << &global_var << std::endl;
std::cout << "静态全局变量地址: " << &static_var << std::endl;
std::cout << "常量地址: " << &const_var << std::endl;
exampleFunction();
return 0;
}
`
)
const codeStr2 = ref(
`
import java.text.SimpleDateFormat;
import java.util.Date;
SimpleDateFormat format = new SimpleDateFormat("dd.MM.yyyy");
Date date = format.parse("25.12.2023");
System.out.println(date);
`
)
const lightCodeRef = ref<LightCodeInstance | null>(null)
const copyText = () => {
lightCodeRef.value?.setLanguage('java')
}
onMounted(() => {
console.log(lightCodeRef.value)
})
</script>
<style scoped>
</style>主题类型
props传递
实例调用
<template>
<div class="container">
<p><h4>props传递</h4></p>
<YmLightCode :code="codeStr" width="650px" theme="github" />
<p><h4>实例调用</h4></p>
<YmLightCode :code="codeStr" width="650px" ref="lightCodeRef" />
</div>
</template>
<script setup lang="ts">
import { ref , onMounted } from 'vue'
import { type LightCodeInstance } from 'guyan-ym-ui'
const codeStr = ref(
`
// 引入所有组件
import YmUI from 'guyan-ym-ui'
// 引入样式
import 'guyan-ym-ui/dist/index.css'
import App from './App.vue'
// 全局使用
createApp(App).use(YmUI).mount('#app')
`
)
const lightCodeRef = ref<LightCodeInstance | null>(null)
onMounted(() => {
lightCodeRef.value?.setTheme('arduino-light')
})
</script>
<style scoped>
</style>自定义工具栏
可以使用custom开启工具栏显示，并通过tool插槽自定义工具栏内容。
<template>
<div class="container">
<YmLightCode :code="codeStr" width="650px" custom />
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const codeStr = ref(
`
// 引入所有组件
import YmUI from 'guyan-ym-ui'
// 引入样式
import 'guyan-ym-ui/dist/index.css'
import App from './App.vue'
// 全局使用
createApp(App).use(YmUI).mount('#app')
`
)
</script>
<style scoped>
</style>LightCode API
Props
| Name | Description | Type | Default |
|---|---|---|---|
| code | 要显示的代码内容 | string | - |
| language | 代码语言类型 | string | "javascript" |
| theme | 代码高亮主题 | string | "atom-one-dark" |
| width | 组件宽度 | string | number | "700px" |
| height | 组件高度 | string | number | "auto" |
| custom | 是否显示自定义工具栏 | boolean | true |
Events
| Name | Description | Type |
|---|---|---|
| copy | 代码复制时触发 | (code: string) => void |
| languageChange | 语言切换时触发 | (language: string) => void |
| themeChange | 主题切换时触发 | (theme: string) => void |
Exposes
| Name | Description | Type |
|---|---|---|
| copyCode | 复制代码内容，返回复制的代码 | () => string |
| setLanguage | 设置代码语言 | (language: string) => void |
| setTheme | 设置代码主题 | (theme: string) => void |
Slots
| Name | Description |
|---|---|
| tool | 自定义工具栏内容 |
Constants
light_light_language_list
js
const light_language_list = [
"javascript",
"css",
"html",
"json",
"markdown",
"typescript",
"php",
"python",
"java",
"c",
"c++",
"c#",
"go",
"kotlin",
"ruby",
"swift",
"rust",
"shell",
"sql",
"yaml",
"dart",
]light_theme_list
js
const light_theme_list = [
"atom-one-dark",
"a11y-dark",
"a11y-light",
"agate",
"an-old-hope",
"arduino-light",
"arta",
"brown-paper",
"codepen-embed",
"color-brewer",
"cybertopia-cherry",
"dark",
"default",
"devibeans",
"docco",
"far",
"felipec",
"foundation",
"github-dark-dimmed",
"github-dark",
"github",
"gml-dark"
];