定理环境的问题
所有回答(2)
0
博客园支持LaTex公式的，参照这个页面开启其设置即可。http://www.cnblogs.com/cmt/p/3279312.html
例如，你的这个 公式就是 \({e}^{\pi i} + 1 = 0\)
觉得LaTeX公式不好写的话，找个LaTeX的在线公式编辑器，编辑完了后拷贝过来即可。
公式我会啊，就是怎样才能打出来的公式在盒子里面，有一种好看的效果，如上图
上图是在Winedt里编译出来的，不知道博客园里能不能产生这种效果
0
猜想尝试
虽然我也不知道回复一个11年前的博问有什么用，但是反正被我看到了，那我只能说反正现在是可以实现的。如果取得了 JavaScript 权限，可以尝试一下使用 JavaScript 动态渲染 Callout Blocks 语法。
> [!theorem] Euler's identity
> the quality
>
> $$
> e^{\pi i} + 1 = 0
> $$
> Where $e$ is Eular's number, $\pi$ is the ratio of any circle's circumference to its diameter and $i$
> is the imaginary unit, is called Eular's identity.
一个类似的方案
我之前做过一个类似的，就是用 JavaScript 动态渲染 GitHub styled Alart Quote Blocks，至少能证明这是可行的。我在页面定制 CSS 样式里面加入了如下内容：
/* 为博客园增加类似 Microsoft 风格的 Alart */
.git-alert {
position: relative; /* 创建定位上下文 */
padding: 16px !important;
}
/* header 的样式设置 */
.git-alert-header {
display: flex;
gap: calc(8px * 1.618); /* 黄金分割间距 */
align-items: center;
margin-bottom: 2px;
/* 修复定位的核心 */
position: static !important;
transform: none !important;
}
/* icon 的样式设置 */
.git-alert-icon {
width: 20px;
height: 20px;
margin-right: 50px !important; /* 强制间距 */
/* 清除旧方案的绝对定位 */
position: static !important;
left: auto !important;
top: auto !important;
}
/* alart 框内的实际文本的样式设置 */
.git-alert-content {
padding-left: 0px !important; /* 取消旧偏移 */
/* 视觉分隔线，根据需要加粗 */
border-top: 0px solid rgba(0,0,0,0.1);
margin-top: 0px;
padding-top: 0px;
}
然后在页脚的 HTML 里面加入：
<script> /* 为博客园增加类似 Microsoft 风格的 Alart */
document.addEventListener('DOMContentLoaded', () => {
// 匹配 [!TYPE] 格式的正则
const alertRegex = /\[\!([a-zA-Z]+)\]\s?(.*)/;
// 遍历所有 blockquote
document.querySelectorAll('blockquote').forEach(blockquote => {
const firstP = blockquote.querySelector('p:first-child');
if (!firstP) return;
// 提取 Alert 类型
const match = firstP.textContent.match(alertRegex);
if (!match) return;
const [fullMatch, type, text] = match;
const alertType = type.toLowerCase(); // 转为小写
// 更新第一个段落的内容
firstP.innerHTML = text;
// 添加通用 Alert 类名
blockquote.classList.add('git-alert', `git-alert-${alertType}`, `git-alert-${alertType}-type`);
// 插入图标和内容容器
blockquote.innerHTML = `
<div class="git-alert-header">
${getIconSVG(alertType)}
<span class="git-alert-${alertType}-type">${type.toUpperCase()}</span>
</div>
<div class="git-alert-content">
${blockquote.innerHTML.replace(/\[\!.*?\]\s?/, '')}
</div>
`
});
// 动态添加样式表
const style = document.createElement('style');
// 上面的几排是边框和背景颜色，下面的是 type 字样的颜色
// 如果需要增加额外的样式，可以写在下面
style.textContent = `
.git-alert-info {
border-color: #316dca !important;
background: rgba(49, 109, 202, 0.1) !important;
}
.git-alert-note {
border-color: #316dca !important;
background: rgba(49, 109, 202, 0.1) !important;
}
.git-alert-remark {
border-color: #316dca !important;
background: rgba(49, 109, 202, 0.1) !important;
}
.git-alert-warning {
border-color: #bb8009 !important;
background: rgba(187, 128, 9, 0.1) !important;
}
.git-alert-tip {
border-color: #2ea043 !important;
background: rgba(46, 160, 67, 0.1) !important;
}
.git-alert-important {
border-color: #8256d0 !important;
background: rgba(130, 86, 208, 0.1) !important;
}
.git-alert-caution {
border-color: #c83c39 !important;
background: rgba(200, 60, 75, 0.1) !important;
}
.git-alert-abstract {
border-color: #53dfdd !important;
background: rgba(83, 223, 221, 0.1) !important;
}
.git-alert-example {
border-color: #8256d0 !important;
background: rgba(130, 86, 208, 0.1) !important;
}
.git-alert-info-type {
color: #316dca;
}
.git-alert-note-type {
color: #316dca;
}
.git-alert-note-remark {
color: #316dca;
}
.git-alert-warning-type {
color: #bb8009;
}
.git-alert-tip-type {
color: #2ea043;
}
.git-alert-important-type {
color: #8256d0;
}
.git-alert-caution-type {
color: #c83c39;
}
.git-alert-abstract-type {
color: #53dfdd;
}
.git-alert-example-type {
color: #8256d0;
}
`;
document.head.appendChild(style);
});
// 我这里虽然区分了标题颜色和背景颜色，但是根据我的偏好两者实际上是
// 一样的颜色。如果有需要可以自行扩展颜色。
// 获取对应图标 SVG
// <https://primer.style/octicons>
// <https://github.com/orgs/community/discussions/16925>
function getIconSVG(type) {
const icons = {
info: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill="#1f6feb" d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.5 7.75A.75.75 0 0 1 7.25 7h1a.75.75 0 0 1 .75.75v2.75h.25a.75.75 0 0 1 0 1.5h-2a.75.75 0 0 1 0-1.5h.25v-2h-.25a.75.75 0 0 1-.75-.75ZM8 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"></path></svg>',
note: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill="#1f6feb" d="M11.013 1.427a1.75 1.75 0 0 1 2.474 0l1.086 1.086a1.75 1.75 0 0 1 0 2.474l-8.61 8.61c-.21.21-.47.364-.756.445l-3.251.93a.75.75 0 0 1-.927-.928l.929-3.25c.081-.286.235-.547.445-.758l8.61-8.61Zm.176 4.823L9.75 4.81l-6.286 6.287a.253.253 0 0 0-.064.108l-.558 1.953 1.953-.558a.253.253 0 0 0 .108-.064Zm1.238-3.763a.25.25 0 0 0-.354 0L10.811 3.75l1.439 1.44 1.263-1.263a.25.25 0 0 0 0-.354Z"></path></svg>',
remark: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill="#1f6feb" d="M11.013 1.427a1.75 1.75 0 0 1 2.474 0l1.086 1.086a1.75 1.75 0 0 1 0 2.474l-8.61 8.61c-.21.21-.47.364-.756.445l-3.251.93a.75.75 0 0 1-.927-.928l.929-3.25c.081-.286.235-.547.445-.758l8.61-8.61Zm.176 4.823L9.75 4.81l-6.286 6.287a.253.253 0 0 0-.064.108l-.558 1.953 1.953-.558a.253.253 0 0 0 .108-.064Zm1.238-3.763a.25.25 0 0 0-.354 0L10.811 3.75l1.439 1.44 1.263-1.263a.25.25 0 0 0 0-.354Z"></path></svg>',
warning: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill="#bb8009" d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575ZM8 5a.75.75 0 0 0-.75.75v2.5a.75.75 0 0 0 1.5 0v-2.5A.75.75 0 0 0 8 5Zm1 6a1 1 0 1 0-2 0 1 1 0 0 0 2 0Z"></path></svg>',
tip: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill="#2ea043" d="M8 1.5c-2.363 0-4 1.69-4 3.75 0 .984.424 1.625.984 2.304l.214.253c.223.264.47.556.673.848.284.411.537.896.621 1.49a.75.75 0 0 1-1.484.211c-.04-.282-.163-.547-.37-.847a8.456 8.456 0 0 0-.542-.68c-.084-.1-.173-.205-.268-.32C3.201 7.75 2.5 6.766 2.5 5.25 2.5 2.31 4.863 0 8 0s5.5 2.31 5.5 5.25c0 1.516-.701 2.5-1.328 3.259-.095.115-.184.22-.268.319-.207.245-.383.453-.541.681-.208.3-.33.565-.37.847a.751.751 0 0 1-1.485-.212c.084-.593.337-1.078.621-1.489.203-.292.45-.584.673-.848.075-.088.147-.173.213-.253.561-.679.985-1.32.985-2.304 0-2.06-1.637-3.75-4-3.75ZM5.75 12h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1 0-1.5ZM6 15.25a.75.75 0 0 1 .75-.75h2.5a.75.75 0 0 1 0 1.5h-2.5a.75.75 0 0 1-.75-.75Z"></path></svg>',
important: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill="#8256d0" d="M0 1.75C0 .784.784 0 1.75 0h12.5C15.216 0 16 .784 16 1.75v9.5A1.75 1.75 0 0 1 14.25 13H8.06l-2.573 2.573A1.458 1.458 0 0 1 3 14.543V13H1.75A1.75 1.75 0 0 1 0 11.25Zm1.75-.25a.25.25 0 0 0-.25.25v9.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h6.5a.25.25 0 0 0 .25-.25v-9.5a.25.25 0 0 0-.25-.25Zm7 2.25v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 9a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path></svg>',
caution: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill="#c83c39" d="M4.47.22A.749.749 0 0 1 5 0h6c.199 0 .389.079.53.22l4.25 4.25c.141.14.22.331.22.53v6a.749.749 0 0 1-.22.53l-4.25 4.25A.749.749 0 0 1 11 16H5a.749.749 0 0 1-.53-.22L.22 11.53A.749.749 0 0 1 0 11V5c0-.199.079-.389.22-.53Zm.84 1.28L1.5 5.31v5.38l3.81 3.81h5.38l3.81-3.81V5.31L10.69 1.5ZM8 4a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0v-3.5A.75.75 0 0 1 8 4Zm0 8a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"></path></svg>',
abstract: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill="#53dfdd" d="M2.5 1.75v11.5c0 .138.112.25.25.25h3.17a.75.75 0 0 1 0 1.5H2.75A1.75 1.75 0 0 1 1 13.25V1.75C1 .784 1.784 0 2.75 0h8.5C12.216 0 13 .784 13 1.75v7.736a.75.75 0 0 1-1.5 0V1.75a.25.25 0 0 0-.25-.25h-8.5a.25.25 0 0 0-.25.25Zm13.274 9.537v-.001l-4.557 4.45a.75.75 0 0 1-1.055-.008l-1.943-1.95a.75.75 0 0 1 1.062-1.058l1.419 1.425 4.026-3.932a.75.75 0 1 1 1.048 1.074ZM4.75 4h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1 0-1.5ZM4 7.75A.75.75 0 0 1 4.75 7h2a.75.75 0 0 1 0 1.5h-2A.75.75 0 0 1 4 7.75Z"></path></svg>',
example: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill="#8256d0" d="M5.75 2.5h8.5a.75.75 0 0 1 0 1.5h-8.5a.75.75 0 0 1 0-1.5Zm0 5h8.5a.75.75 0 0 1 0 1.5h-8.5a.75.75 0 0 1 0-1.5Zm0 5h8.5a.75.75 0 0 1 0 1.5h-8.5a.75.75 0 0 1 0-1.5ZM2 14a1 1 0 1 1 0-2 1 1 0 0 1 0 2Zm1-6a1 1 0 1 1-2 0 1 1 0 0 1 2 0ZM2 4a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"></path></svg>'
};
return icons[type] || icons.note;
}
</script>
实现效果
我自己根据喜好做成了下面的样式，你可以根据你的需求进行改动。
> [!info]
> 执行完如下操作后，再次尝试访问博客，您应该会看到博客正常加载。（参考下图）。
> [!important]
> 如果在执行完这一操作后博客仍然没有正常加载，请与我联系。
如图所示。
