HTML实现带自定义格式的LaTeX自适应大括号列表方案求助

方案1：基于KaTeX/MathJax内嵌HTML（推荐，适配原有LaTeX使用习惯） #

当前主流的前端LaTeX渲染库KaTeX、MathJax原生支持在公式内部插入带自定义类的HTML元素，无需拆分\begin和\end的完整结构，既保证公式逻辑正常解析渲染，又可以为单个选项独立设置任意CSS样式。

代码示例 #

LaTeX公式写法：

$
\left\lbrace
\begin{matrix}
  \htmlClass{custom-option}{Option1}\\
  \htmlClass{custom-option}{Option2}\\
  \htmlClass{custom-option highlight}{Option3}
\end{matrix}
\right\rbrace
$

对应CSS样式：

/* 覆盖LaTeX渲染库默认字体样式，自定义选项格式 */
.katex .custom-option,
.mathjax .custom-option {
  font-family: "微软雅黑", sans-serif;
  font-weight: normal;
  font-style: normal;
}
/* 单独高亮样式示例 */
.custom-option.highlight {
  color: #f00;
  font-weight: bold;
  font-style: italic;
}

该方案渲染结果为矢量文本，可自适应所有屏幕尺寸，最多支持7个选项的大括号自动适配高度。

方案2：纯原生HTML+CSS实现（无第三方依赖） #

如果不想引入LaTeX渲染库，可直接用CSS绘制自适应高度的大括号，所有选项直接写在HTML中，样式调整自由度更高。

代码示例 #

HTML结构：

<div class="brace-wrapper">
  <div class="brace-left"></div>
  <ul class="option-list">
    <li class="option-item">Option1</li>
    <li class="option-item">Option2</li>
    <li class="option-item highlight">Option3</li>
    <li class="option-item">Option4</li>
    <li class="option-item">Option5</li>
    <li class="option-item">Option6</li>
    <li class="option-item">Option7</li>
  </ul>
</div>

对应CSS样式：

.brace-wrapper {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0;
}
/* 自适应高度左大括号 */
.brace-left {
  width: 10px;
  height: 100%;
  position: relative;
}
.brace-left::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(50% + 1px);
  border: 2px solid #000;
  border-right: none;
  border-radius: 8px 0 0 8px;
  box-sizing: border-box;
}
.brace-left::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: calc(50% + 1px);
  border: 2px solid #000;
  border-right: none;
  border-radius: 0 0 0 8px;
  box-sizing: border-box;
}
/* 选项列表 */
.option-list {
  list-style: none;
  padding: 0;
  margin: 0;
  line-height: 1.6;
}
.option-item {
  padding: 2px 4px;
  font-family: "宋体", serif;
}
.highlight {
  font-weight: bold;
  font-style: italic;
  color: #2385bb;
}

该方案完全基于原生Web能力，大括号高度会自动跟随选项列表高度调整，无需额外适配，所有元素均为矢量样式，可适配任意屏幕尺寸。

内容的提问来源于stack exchange，提问作者AllertGen