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:
xuyueandClaude Opus 5.5 committed
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 BVideo from "./components/BVideo.vue"
|
||||
import Author from "./components/Author.vue"
|
||||
import CodeEditor from "./components/CodeEditor.vue"
|
||||
|
||||
export default {
|
||||
extends: DefaultTheme,
|
||||
async enhanceApp({ app }) {
|
||||
app.component("bvideo", BVideo)
|
||||
app.component("author", Author)
|
||||
app.component("editor", CodeEditor)
|
||||
},
|
||||
} 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(),
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user