Skip to content

添加问答样式

复制本地路径 | 在线编辑

如图所示，样式如下：

我非常喜欢在文章中加入问答样式，我喜欢这种样式。在如今大模型时代，个人认为这种样式似乎应该存在更多。大模型时代下，重要的不是结果，而是思考过程的记录。什么是思考？苏格拉底说，问问题吧。

思考的过程重要吗？很多时候似乎也不重要了。但这就是单纯对个人思考的记录，这是一种留存，一种记忆，一种我还是人类的小声呼喊。

世上充满遗憾的一件事：苏格拉底没有遇上大模型。

具体实现

文件的原样式：

<!-- llm -->
## question

content
<!-- end -->

经过转后的样式：

!!! info ""

    question

    ??? abstract "answer"

    content

通过这种方式，可以让 mkdocs-material 渲染出如上图的。其中样式需要有一定的修改，比如增大字体等，个人的修改如下（BY GPT5.4）：

/* question 块：靠右显示、略放大字号、整体更紧凑 */
.md-typeset .admonition.info {
  width: 60% !important;
  margin: 0.6rem 0 0.9rem auto !important;
  font-size: 0.9rem !important;
  line-height: 1.55;
  border-radius: 0.55rem;
}

/* question 块的字体间隔更小一些 这样更加紧凑 */
.md-typeset .admonition.info > p {
  line-height: 1.5;
}

/* answer 块的字体恢复为原状, mkdocs 原有的过于小了 */
.md-typeset .abstract {
  font-size: 0.8rem !important;
}

.md-typeset .info > .admonition-title,
.md-typeset .info > summary {
  margin: 0;
  padding: 0.45rem 0.8rem;
  font-size: 0.95rem;
}

.md-typeset .admonition.info > p,
.md-typeset .admonition.info > ul,
.md-typeset .admonition.info > ol,
.md-typeset .admonition.info > .admonition-title + * {
  margin-top: 0.45rem !important;
  margin-bottom: 0.45rem !important;
}

.md-typeset .admonition.info > p,
.md-typeset .admonition.info > ul,
.md-typeset .admonition.info > ol {
  padding-left: 0.8rem;
  padding-right: 0.8rem;
}

/* .md-typeset .admonition.info > *:last-child {
  padding-bottom: 0.55rem;
} */

@media (max-width: 76.1875em) {
  .md-typeset .admonition.info {
    width: 100% !important;
    margin-left: 0 !important;
    font-size: 1rem !important;
  }
}

Comments