remove judge0 code editor, upgrade vitepress to v2
- Drop the <editor> component, Judge0 client and CodeMirror themes/deps - Pin markdown-it-mathjax3 to ^4 to satisfy vitepress peer dependency - Upgrade vitepress 1.6.4 -> 2.0.0-alpha.20 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
1 parent
e5c16de612
commit
2db1fa5d0d
9 files changed
+1288
-2563
No files matched your search
@@ -1,110 +0,0 @@
|
|||||||
import { EditorView } from "@codemirror/view"
|
|
||||||
import { Extension } from "@codemirror/state"
|
|
||||||
import {
|
|
||||||
HighlightStyle,
|
|
||||||
TagStyle,
|
|
||||||
syntaxHighlighting,
|
|
||||||
} from "@codemirror/language"
|
|
||||||
|
|
||||||
interface Options {
|
|
||||||
/**
|
|
||||||
* Theme variant. Determines which styles CodeMirror will apply by default.
|
|
||||||
*/
|
|
||||||
variant: Variant
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Settings to customize the look of the editor, like background, gutter, selection and others.
|
|
||||||
*/
|
|
||||||
settings: Settings
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Syntax highlighting styles.
|
|
||||||
*/
|
|
||||||
styles: TagStyle[]
|
|
||||||
}
|
|
||||||
|
|
||||||
type Variant = "light" | "dark"
|
|
||||||
|
|
||||||
interface Settings {
|
|
||||||
/**
|
|
||||||
* Editor background.
|
|
||||||
*/
|
|
||||||
background: string
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Default text color.
|
|
||||||
*/
|
|
||||||
foreground: string
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Caret color.
|
|
||||||
*/
|
|
||||||
caret: string
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Selection background.
|
|
||||||
*/
|
|
||||||
selection: string
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Background of highlighted lines.
|
|
||||||
*/
|
|
||||||
lineHighlight: string
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Gutter background.
|
|
||||||
*/
|
|
||||||
gutterBackground: string
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Text color inside gutter.
|
|
||||||
*/
|
|
||||||
gutterForeground: string
|
|
||||||
|
|
||||||
gutterBorderRight: string
|
|
||||||
}
|
|
||||||
|
|
||||||
export const createTheme = ({
|
|
||||||
variant,
|
|
||||||
settings,
|
|
||||||
styles,
|
|
||||||
}: Options): Extension => {
|
|
||||||
const theme = EditorView.theme(
|
|
||||||
{
|
|
||||||
// eslint-disable-next-line @typescript-eslint/naming-convention
|
|
||||||
"&": {
|
|
||||||
backgroundColor: settings.background,
|
|
||||||
color: settings.foreground,
|
|
||||||
},
|
|
||||||
".cm-content": {
|
|
||||||
caretColor: settings.caret,
|
|
||||||
},
|
|
||||||
".cm-cursor, .cm-dropCursor": {
|
|
||||||
borderLeftColor: settings.caret,
|
|
||||||
},
|
|
||||||
"&.cm-focused .cm-selectionBackgroundm .cm-selectionBackground, .cm-content ::selection":
|
|
||||||
{
|
|
||||||
backgroundColor: settings.selection,
|
|
||||||
},
|
|
||||||
".cm-activeLine": {
|
|
||||||
backgroundColor: settings.lineHighlight,
|
|
||||||
},
|
|
||||||
".cm-gutters": {
|
|
||||||
backgroundColor: settings.gutterBackground,
|
|
||||||
borderRight: settings.gutterBorderRight,
|
|
||||||
color: settings.gutterForeground,
|
|
||||||
},
|
|
||||||
".cm-activeLineGutter": {
|
|
||||||
backgroundColor: settings.lineHighlight,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
dark: variant === "dark",
|
|
||||||
},
|
|
||||||
)
|
|
||||||
|
|
||||||
const highlightStyle = HighlightStyle.define(styles)
|
|
||||||
const extension = [theme, syntaxHighlighting(highlightStyle)]
|
|
||||||
|
|
||||||
return extension
|
|
||||||
}
|
|
||||||
@@ -1,149 +0,0 @@
|
|||||||
import { EditorView } from "@codemirror/view"
|
|
||||||
import { Extension } from "@codemirror/state"
|
|
||||||
import { HighlightStyle, syntaxHighlighting } from "@codemirror/language"
|
|
||||||
import { tags as t } from "@lezer/highlight"
|
|
||||||
|
|
||||||
// Using https://github.com/one-dark/vscode-one-dark-theme/ as reference for the colors
|
|
||||||
|
|
||||||
const chalky = "#e5c07b",
|
|
||||||
coral = "#e06c75",
|
|
||||||
cyan = "#56b6c2",
|
|
||||||
invalid = "#ffffff",
|
|
||||||
ivory = "#abb2bf",
|
|
||||||
stone = "#7d8799", // Brightened compared to original to increase contrast
|
|
||||||
malibu = "#61afef",
|
|
||||||
sage = "#98c379",
|
|
||||||
whiskey = "#d19a66",
|
|
||||||
violet = "#c678dd",
|
|
||||||
darkBackground = "#26262a",
|
|
||||||
highlightBackground = "#2c313a",
|
|
||||||
background = "#101014", // naive-ui
|
|
||||||
tooltipBackground = "#353a42",
|
|
||||||
selection = "#3E4451",
|
|
||||||
cursor = "#528bff"
|
|
||||||
|
|
||||||
/// The editor theme styles for One Dark.
|
|
||||||
const oneDarkTheme = EditorView.theme(
|
|
||||||
{
|
|
||||||
"&": {
|
|
||||||
color: ivory,
|
|
||||||
backgroundColor: background,
|
|
||||||
},
|
|
||||||
|
|
||||||
".cm-content": {
|
|
||||||
caretColor: cursor,
|
|
||||||
},
|
|
||||||
|
|
||||||
".cm-cursor, .cm-dropCursor": { borderLeftColor: cursor },
|
|
||||||
"&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection":
|
|
||||||
{ backgroundColor: selection },
|
|
||||||
|
|
||||||
".cm-panels": { backgroundColor: darkBackground, color: ivory },
|
|
||||||
".cm-panels.cm-panels-top": { borderBottom: "2px solid black" },
|
|
||||||
".cm-panels.cm-panels-bottom": { borderTop: "2px solid black" },
|
|
||||||
|
|
||||||
".cm-searchMatch": {
|
|
||||||
backgroundColor: "#72a1ff59",
|
|
||||||
outline: "1px solid #457dff",
|
|
||||||
},
|
|
||||||
".cm-searchMatch.cm-searchMatch-selected": {
|
|
||||||
backgroundColor: "#6199ff2f",
|
|
||||||
},
|
|
||||||
|
|
||||||
".cm-activeLine": { backgroundColor: "#6699ff0b" },
|
|
||||||
".cm-selectionMatch": { backgroundColor: "#aafe661a" },
|
|
||||||
|
|
||||||
"&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket": {
|
|
||||||
backgroundColor: "#bad0f847",
|
|
||||||
},
|
|
||||||
|
|
||||||
".cm-gutters": {
|
|
||||||
backgroundColor: background,
|
|
||||||
color: stone,
|
|
||||||
border: "none",
|
|
||||||
},
|
|
||||||
|
|
||||||
".cm-activeLineGutter": {
|
|
||||||
backgroundColor: highlightBackground,
|
|
||||||
},
|
|
||||||
|
|
||||||
".cm-foldPlaceholder": {
|
|
||||||
backgroundColor: "transparent",
|
|
||||||
border: "none",
|
|
||||||
color: "#ddd",
|
|
||||||
},
|
|
||||||
|
|
||||||
".cm-tooltip": {
|
|
||||||
border: "none",
|
|
||||||
backgroundColor: tooltipBackground,
|
|
||||||
},
|
|
||||||
".cm-tooltip .cm-tooltip-arrow:before": {
|
|
||||||
borderTopColor: "transparent",
|
|
||||||
borderBottomColor: "transparent",
|
|
||||||
},
|
|
||||||
".cm-tooltip .cm-tooltip-arrow:after": {
|
|
||||||
borderTopColor: tooltipBackground,
|
|
||||||
borderBottomColor: tooltipBackground,
|
|
||||||
},
|
|
||||||
".cm-tooltip-autocomplete": {
|
|
||||||
"& > ul > li[aria-selected]": {
|
|
||||||
backgroundColor: highlightBackground,
|
|
||||||
color: ivory,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{ dark: true },
|
|
||||||
)
|
|
||||||
|
|
||||||
/// The highlighting style for code in the One Dark theme.
|
|
||||||
const oneDarkHighlightStyle = HighlightStyle.define([
|
|
||||||
{ tag: t.keyword, color: violet },
|
|
||||||
{
|
|
||||||
tag: [t.name, t.deleted, t.character, t.propertyName, t.macroName],
|
|
||||||
color: coral,
|
|
||||||
},
|
|
||||||
{ tag: [t.function(t.variableName), t.labelName], color: malibu },
|
|
||||||
{ tag: [t.color, t.constant(t.name), t.standard(t.name)], color: whiskey },
|
|
||||||
{ tag: [t.definition(t.name), t.separator], color: ivory },
|
|
||||||
{
|
|
||||||
tag: [
|
|
||||||
t.typeName,
|
|
||||||
t.className,
|
|
||||||
t.number,
|
|
||||||
t.changed,
|
|
||||||
t.annotation,
|
|
||||||
t.modifier,
|
|
||||||
t.self,
|
|
||||||
t.namespace,
|
|
||||||
],
|
|
||||||
color: chalky,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
tag: [
|
|
||||||
t.operator,
|
|
||||||
t.operatorKeyword,
|
|
||||||
t.url,
|
|
||||||
t.escape,
|
|
||||||
t.regexp,
|
|
||||||
t.link,
|
|
||||||
t.special(t.string),
|
|
||||||
],
|
|
||||||
color: cyan,
|
|
||||||
},
|
|
||||||
{ tag: [t.meta, t.comment], color: stone },
|
|
||||||
{ tag: t.strong, fontWeight: "bold" },
|
|
||||||
{ tag: t.emphasis, fontStyle: "italic" },
|
|
||||||
{ tag: t.strikethrough, textDecoration: "line-through" },
|
|
||||||
{ tag: t.link, color: stone, textDecoration: "underline" },
|
|
||||||
{ tag: t.heading, fontWeight: "bold", color: coral },
|
|
||||||
{ tag: [t.atom, t.bool, t.special(t.variableName)], color: whiskey },
|
|
||||||
{ tag: [t.processingInstruction, t.string, t.inserted], color: sage },
|
|
||||||
{ tag: t.invalid, color: invalid },
|
|
||||||
])
|
|
||||||
|
|
||||||
/// Extension to enable the One Dark theme (both the editor theme and
|
|
||||||
/// the highlight style).
|
|
||||||
export const oneDark: Extension = [
|
|
||||||
oneDarkTheme,
|
|
||||||
syntaxHighlighting(oneDarkHighlightStyle),
|
|
||||||
]
|
|
||||||
@@ -1,83 +0,0 @@
|
|||||||
import { tags as t } from "@lezer/highlight"
|
|
||||||
import { createTheme } from "./createTheme"
|
|
||||||
|
|
||||||
// Author: Kenneth Reitz
|
|
||||||
export const smoothy = createTheme({
|
|
||||||
variant: "light",
|
|
||||||
settings: {
|
|
||||||
background: "#FFFFFF",
|
|
||||||
foreground: "#000000",
|
|
||||||
caret: "#000000",
|
|
||||||
selection: "#FFFD0054",
|
|
||||||
gutterBackground: "#FFFFFF",
|
|
||||||
gutterForeground: "#00000070",
|
|
||||||
gutterBorderRight: "none",
|
|
||||||
lineHighlight: "#00000008",
|
|
||||||
},
|
|
||||||
styles: [
|
|
||||||
{
|
|
||||||
tag: t.comment,
|
|
||||||
color: "#CFCFCF",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
tag: [t.number, t.bool, t.null],
|
|
||||||
color: "#E66C29",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
tag: [
|
|
||||||
t.className,
|
|
||||||
t.definition(t.propertyName),
|
|
||||||
t.function(t.variableName),
|
|
||||||
t.labelName,
|
|
||||||
t.definition(t.typeName),
|
|
||||||
],
|
|
||||||
color: "#2EB43B",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
tag: t.keyword,
|
|
||||||
color: "#D8B229",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
tag: t.operator,
|
|
||||||
color: "#4EA44E",
|
|
||||||
fontWeight: "bold",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
tag: [t.definitionKeyword, t.modifier],
|
|
||||||
color: "#925A47",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
tag: t.string,
|
|
||||||
color: "#704D3D",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
tag: t.typeName,
|
|
||||||
color: "#2F8996",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
tag: [t.variableName, t.propertyName],
|
|
||||||
color: "#77ACB0",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
tag: t.self,
|
|
||||||
color: "#77ACB0",
|
|
||||||
fontWeight: "bold",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
tag: t.regexp,
|
|
||||||
color: "#E3965E",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
tag: [t.tagName, t.angleBracket],
|
|
||||||
color: "#BAA827",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
tag: t.attributeName,
|
|
||||||
color: "#B06520",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
tag: t.derefOperator,
|
|
||||||
color: "#000",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
})
|
|
||||||
@@ -1,115 +0,0 @@
|
|||||||
<script setup lang="ts">
|
|
||||||
import { computed, ref } from "vue"
|
|
||||||
import { useData } from "vitepress"
|
|
||||||
import { VPButton } from "vitepress/theme"
|
|
||||||
import Codemirror from "vue-codemirror6"
|
|
||||||
import { cpp } from "@codemirror/lang-cpp"
|
|
||||||
import { python } from "@codemirror/lang-python"
|
|
||||||
import { indentUnit } from "@codemirror/language"
|
|
||||||
import { EditorView } from "@codemirror/view"
|
|
||||||
import { createSubmission } from "../judge"
|
|
||||||
import { smoothy } from "../cm-themes/smoothy"
|
|
||||||
import { oneDark } from "../cm-themes/oneDark"
|
|
||||||
|
|
||||||
interface Props {
|
|
||||||
code: string
|
|
||||||
readonly?: boolean
|
|
||||||
lang?: "python" | "c"
|
|
||||||
}
|
|
||||||
|
|
||||||
const props = withDefaults(defineProps<Props>(), {
|
|
||||||
lang: "python",
|
|
||||||
readonly: false,
|
|
||||||
})
|
|
||||||
|
|
||||||
const { isDark } = useData()
|
|
||||||
|
|
||||||
const lang = computed(() => {
|
|
||||||
if (props.lang === "python") {
|
|
||||||
return python()
|
|
||||||
}
|
|
||||||
return cpp()
|
|
||||||
})
|
|
||||||
|
|
||||||
const styleTheme = EditorView.baseTheme({
|
|
||||||
"& .cm-scroller": {
|
|
||||||
"font-family": "Monaco",
|
|
||||||
border: "2px solid var(--vp-c-divider)",
|
|
||||||
},
|
|
||||||
"&.cm-editor.cm-focused": {
|
|
||||||
outline: "none",
|
|
||||||
},
|
|
||||||
"&.cm-editor .cm-tooltip.cm-tooltip-autocomplete ul": {
|
|
||||||
"font-family": "Monaco",
|
|
||||||
},
|
|
||||||
})
|
|
||||||
|
|
||||||
const code = ref(props.code.trim())
|
|
||||||
const input = ref("")
|
|
||||||
const output = ref("")
|
|
||||||
|
|
||||||
async function run() {
|
|
||||||
output.value = ""
|
|
||||||
const result = await createSubmission(
|
|
||||||
{ value: code.value, language: props.lang },
|
|
||||||
input.value,
|
|
||||||
)
|
|
||||||
output.value = result.output
|
|
||||||
}
|
|
||||||
|
|
||||||
function reset() {
|
|
||||||
code.value = props.code.trim()
|
|
||||||
output.value = ""
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<template>
|
|
||||||
<ClientOnly>
|
|
||||||
<div :class="$style.container">
|
|
||||||
<p :class="$style.title">代码区</p>
|
|
||||||
<Codemirror
|
|
||||||
v-model="code"
|
|
||||||
:lang="lang"
|
|
||||||
basic
|
|
||||||
tab
|
|
||||||
:tab-size="4"
|
|
||||||
:readonly="props.readonly"
|
|
||||||
:extensions="[
|
|
||||||
styleTheme,
|
|
||||||
isDark ? oneDark : smoothy,
|
|
||||||
indentUnit.of(' '),
|
|
||||||
]"
|
|
||||||
/>
|
|
||||||
<p :class="$style.title">输入框</p>
|
|
||||||
<Codemirror
|
|
||||||
v-model="input"
|
|
||||||
minimal
|
|
||||||
:extensions="[styleTheme, isDark ? oneDark : smoothy]"
|
|
||||||
/>
|
|
||||||
<div :class="$style.actions">
|
|
||||||
<VPButton :class="$style.run" @click="run" text="运行"></VPButton>
|
|
||||||
<VPButton @click="reset" theme="alt" text="重置"></VPButton>
|
|
||||||
</div>
|
|
||||||
<p :class="$style.title" v-if="output.length">运行结果</p>
|
|
||||||
<pre :class="$style.output">{{ output }}</pre>
|
|
||||||
</div>
|
|
||||||
</ClientOnly>
|
|
||||||
</template>
|
|
||||||
<style module>
|
|
||||||
.container {
|
|
||||||
background-color: var(--vp-code-block-bg);
|
|
||||||
padding: 8px 16px;
|
|
||||||
border-radius: 8px;
|
|
||||||
}
|
|
||||||
.title {
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
.actions {
|
|
||||||
margin-top: 20px;
|
|
||||||
}
|
|
||||||
.run {
|
|
||||||
margin-right: 20px;
|
|
||||||
}
|
|
||||||
.output {
|
|
||||||
font-family: Monaco;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -2,13 +2,11 @@ import type { Theme } from "vitepress"
|
|||||||
import DefaultTheme from "vitepress/theme"
|
import DefaultTheme from "vitepress/theme"
|
||||||
import BVideo from "./components/BVideo.vue"
|
import BVideo from "./components/BVideo.vue"
|
||||||
import Author from "./components/Author.vue"
|
import Author from "./components/Author.vue"
|
||||||
import CodeEditor from "./components/CodeEditor.vue"
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
extends: DefaultTheme,
|
extends: DefaultTheme,
|
||||||
async enhanceApp({ app }) {
|
async enhanceApp({ app }) {
|
||||||
app.component("bvideo", BVideo)
|
app.component("bvideo", BVideo)
|
||||||
app.component("author", Author)
|
app.component("author", Author)
|
||||||
app.component("editor", CodeEditor)
|
|
||||||
},
|
},
|
||||||
} satisfies Theme
|
} satisfies Theme
|
||||||
@@ -1,77 +0,0 @@
|
|||||||
import axios from "axios"
|
|
||||||
import { inBrowser } from "vitepress"
|
|
||||||
|
|
||||||
interface Code {
|
|
||||||
language: "c" | "python"
|
|
||||||
value: string
|
|
||||||
}
|
|
||||||
|
|
||||||
const DEAD_RESULTS = {
|
|
||||||
c: {
|
|
||||||
encoded:
|
|
||||||
"I2luY2x1ZGU8c3RkaW8uaD4NCg0KaW50IG1haW4oKQ0Kew0KICAgIHByaW50Zigi6buE5bKp5LiA6IGMIik7DQogICAgcmV0dXJuIDA7DQp9",
|
|
||||||
result: {
|
|
||||||
status: 3,
|
|
||||||
output: "黄岩一职",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
python: {
|
|
||||||
encoded: "cHJpbnQoIum7hOWyqeS4gOiBjCIp",
|
|
||||||
result: {
|
|
||||||
status: 3,
|
|
||||||
output: "黄岩一职",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}
|
|
||||||
|
|
||||||
let url = "http://10.13.114.114:8082"
|
|
||||||
//@ts-ignore
|
|
||||||
if (import.meta.env.MODE === "production") {
|
|
||||||
url = "https://judge0api.xuyue.cc"
|
|
||||||
}
|
|
||||||
const http = axios.create({ baseURL: url })
|
|
||||||
|
|
||||||
function encode(string?: string) {
|
|
||||||
return btoa(String.fromCharCode(...new TextEncoder().encode(string ?? "")))
|
|
||||||
}
|
|
||||||
|
|
||||||
function decode(bytes?: string) {
|
|
||||||
const latin = atob(bytes ?? "")
|
|
||||||
return new TextDecoder("utf-8").decode(
|
|
||||||
Uint8Array.from({ length: latin.length }, (_, index) =>
|
|
||||||
latin.charCodeAt(index),
|
|
||||||
),
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function createSubmission(code: Code, input: string) {
|
|
||||||
const encodedCode = encode(code.value)
|
|
||||||
|
|
||||||
if (encodedCode === DEAD_RESULTS[code.language].encoded) {
|
|
||||||
return DEAD_RESULTS[code.language].result
|
|
||||||
} else {
|
|
||||||
const id = {
|
|
||||||
c: 50,
|
|
||||||
python: 71,
|
|
||||||
}[code.language]
|
|
||||||
let compilerOptions = ""
|
|
||||||
if (id === 50) compilerOptions = "-lm" // 解决 GCC 的链接问题
|
|
||||||
const payload = {
|
|
||||||
source_code: encodedCode,
|
|
||||||
language_id: id,
|
|
||||||
stdin: encode(input),
|
|
||||||
redirect_stderr_to_stdout: true,
|
|
||||||
compiler_options: compilerOptions,
|
|
||||||
}
|
|
||||||
const response = await http.post("/submissions", payload, {
|
|
||||||
params: { base64_encoded: true, wait: true },
|
|
||||||
})
|
|
||||||
const data = response.data
|
|
||||||
return {
|
|
||||||
status: data.status && data.status.id,
|
|
||||||
output: [decode(data.compile_output), decode(data.stdout)]
|
|
||||||
.join("\n")
|
|
||||||
.trim(),
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -4,19 +4,7 @@
|
|||||||
|
|
||||||
本网站 [https://book.xuyue.cc](https://book.xuyue.cc) 是一本编程书,其中包含了编程语言、应用领域、计算机科学等相关内容。
|
本网站 [https://book.xuyue.cc](https://book.xuyue.cc) 是一本编程书,其中包含了编程语言、应用领域、计算机科学等相关内容。
|
||||||
|
|
||||||
本网站支持代码互动,比如下面的代码区,在输入框输入**黄岩一职**,点击运行,会显示欢迎光临:
|
文中的代码块一般用于演示,可以复制到[自测猫](../code/index.md)中运行:
|
||||||
|
|
||||||
<script lang="ts" setup>
|
|
||||||
const code = `
|
|
||||||
a=input()
|
|
||||||
if a == "黄岩一职":
|
|
||||||
print("欢迎光临")
|
|
||||||
`
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<editor :code="code" />
|
|
||||||
|
|
||||||
当然普通的、不互动的代码块也有,一般用于演示:
|
|
||||||
|
|
||||||
```python
|
```python
|
||||||
print("欢迎光临")
|
print("欢迎光临")
|
||||||
|
|||||||
Generated
+1285
-2007
File diff suppressed because it is too large.
Load diff
+2
-7
@@ -14,14 +14,9 @@
|
|||||||
"license": "ISC",
|
"license": "ISC",
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"prettier": "^3.9.6",
|
"prettier": "^3.9.6",
|
||||||
"vitepress": "1.6.4"
|
"vitepress": "2.0.0-alpha.20"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@codemirror/lang-cpp": "^6.0.3",
|
"markdown-it-mathjax3": "^4.3.2"
|
||||||
"@codemirror/lang-python": "^6.2.1",
|
|
||||||
"axios": "^1.20.0",
|
|
||||||
"codemirror": "^6.0.2",
|
|
||||||
"markdown-it-mathjax3": "^5.2.0",
|
|
||||||
"vue-codemirror6": "~1.3.22"
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
Reference in new issue
Block a user