代码高亮与预览.

检查语法着色、片段标记、行号和执行行的展示。

参考 code-pc 的 CodeMark 和 PreviewEditor。所有算法与数据结构页面共用此组件；可在这里检查主题、行高亮和片段标记效果。

1// 相邻比较与交换2function bubbleSort(arr) {3  for (let end = arr.length - 1; end > 0; end--) {4    for (let j = 0; j < end; j++) {5      if (arr[j] > arr[j + 1]) {当前步骤6        [arr[j], arr[j + 1]] = [arr[j + 1], arr[j]];7      }8    }9  }10  return arr;11}1213const numbers = [42, 18, 65, 30];14console.log(bubbleSort(numbers));

行号从 1 开始；activeLines 使用从 0 开始的索引。复制代码会去掉已解析的 @@ 标记。

预览设置

语言主题当前行最大高度

显示行号同时高亮下一行滚动跟随当前行解析 @@片段@@自定义片段颜色和说明

编辑示例代码

可以加入空行、长行、跨 token 的 @@片段@@，检查预览效果。修改语言会恢复该语言的示例。

代码内容

// 相邻比较与交换
function bubbleSort(arr) {
  for (let end = arr.length - 1; end > 0; end--) {
    for (let j = 0; j < end; j++) {
      if (@@arr[j] > arr[j + 1]@@) {
        @@[arr[j], arr[j + 1]]@@ = [arr[j + 1], arr[j]];
      }
    }
  }
  return arr;
}

const numbers = [42, 18, 65, 30];
console.log(bubbleSort(numbers));

1<CodePreview2  code={source}3  language="javascript"4  theme="tokyoCity"5  activeLines={[4, 5]}6  marks={[{ index: 0, bg: '#ffd84d', color: '#26201a' }]}7  lineNumbers8  followActiveLine9  maxHeight={360}10/>