fix

src/oj/learn/components/ExerciseFill.vue

@@ -8,6 +8,13 @@ hljs.registerLanguage("python", python)
 hljs.registerLanguage("c", c)
 
 const props = defineProps<{ exercise: Exercise; lang?: string }>()
+
+function renderInlineCode(s: string): string {
+  return s.replace(
+    /`([^`]+)`/g,
+    (_, code) => `<code style="background:rgba(127,127,127,0.12);padding:2px 6px;border-radius:4px;font-family:Monaco,monospace;font-size:14px">${code.replace(/</g, '&lt;').replace(/>/g, '&gt;')}</code>`,
+  )
+}
 const data = computed(() => props.exercise.data as ExerciseFillData)
 
 type CodeSeg = { type: "code"; html: string }
@@ -94,11 +101,12 @@ function inputWidth(idx: number): string {
       >
     </template>
 
-    <p style="font-weight: 500; font-size: 16px; margin-bottom: 12px">{{ data.question }}</p>
+    <p style="font-weight: 500; font-size: 16px; margin-bottom: 12px" v-html="renderInlineCode(data.question)" />
 
     <pre
       :style="{
         fontFamily: 'Monaco',
+        fontSize: '16px',
         lineHeight: '1.6',
         background: 'var(--n-color)',
         border: '1px solid var(--n-border-color)',
@@ -116,7 +124,8 @@ function inputWidth(idx: number): string {
         :style="{
           width: inputWidth(seg.index),
           fontFamily: 'Monaco',
-          padding: '1px 4px',
+          fontSize: '16px',
+          padding: '2px 6px',
           borderRadius: '3px',
           border: `1.5px solid ${
             allCorrect

src/oj/learn/components/ExerciseMcq.vue

@@ -2,6 +2,13 @@
 import { Exercise, ExerciseMcqData } from "utils/types"
 
 const props = defineProps<{ exercise: Exercise }>()
+
+function renderInlineCode(s: string): string {
+  return s.replace(
+    /`([^`]+)`/g,
+    (_, code) => `<code style="background:rgba(127,127,127,0.12);padding:2px 6px;border-radius:4px;font-family:Monaco,monospace;font-size:14px">${code.replace(/</g, '&lt;').replace(/>/g, '&gt;')}</code>`,
+  )
+}
 const data = computed(() => props.exercise.data as ExerciseMcqData)
 const isSingle = computed(() => data.value.answer.length === 1)
 
@@ -74,7 +81,7 @@ function optionType(idx: number): "default" | "primary" | "success" {
       </n-space>
     </template>
 
-    <p style="font-weight: 500; font-size: 16px; margin-bottom: 12px">{{ data.question }}</p>
+    <p style="font-weight: 500; font-size: 16px; margin-bottom: 12px" v-html="renderInlineCode(data.question)" />
 
     <n-space vertical :size="8">
       <n-button
@@ -96,7 +103,7 @@ function optionType(idx: number): "default" | "primary" | "success" {
             String.fromCharCode(65 + idx)
           }}</span>
         </template>
-        {{ opt }}
+        <span v-html="renderInlineCode(opt)" />
       </n-button>
     </n-space>
 

src/oj/learn/components/ExerciseSort.vue

@@ -8,6 +8,13 @@ hljs.registerLanguage("python", python)
 hljs.registerLanguage("c", c)
 
 const props = defineProps<{ exercise: Exercise; lang?: string }>()
+
+function renderInlineCode(s: string): string {
+  return s.replace(
+    /`([^`]+)`/g,
+    (_, code) => `<code style="background:rgba(127,127,127,0.12);padding:2px 6px;border-radius:4px;font-family:Monaco,monospace;font-size:14px">${code.replace(/</g, '&lt;').replace(/>/g, '&gt;')}</code>`,
+  )
+}
 const data = computed(() => props.exercise.data as ExerciseSortData)
 
 type LineItem = { originalIdx: number; text: string }
@@ -110,7 +117,7 @@ const lineHtmlMap = computed<Record<number, string>>(() => {
       >
     </template>
 
-    <p style="font-weight: 500; font-size: 16px; margin-bottom: 12px">{{ data.question }}</p>
+    <p style="font-weight: 500; font-size: 16px; margin-bottom: 12px" v-html="renderInlineCode(data.question)" />
 
     <n-space vertical :size="6">
       <div