技术类 代码高亮

Notebook 主题也可用于技术类博客，主题支持代码高亮

文章正文中支持用 围栏代码块书写代码。发布到前台后，

<pre><code>你的代码</code></pre>

会输出为带 notebook-code-block 样式的

并由 highlight.js 在页面加载后自动高亮

JavaScript
// 示例：异步请求与解构
async function fetchUser(id) {
const res = await fetch(`/api/users/${id}`);
if (!res.ok) throw new Error(`HTTP ${res.status}`);
const { name, email, roles = [] } = await res.json();
return { name, email, roles };
}

PHP（WordPress）
add_filter( 'the_title', function ( $title, $post_id ) {
    if ( is_admin() ) {
        return $title;
    }
    return esc_html( $title );
}, 10, 2 );

CSS
/* 示例：卡片布局 */
.notebook-card {
  display: grid;
  gap: 1rem;
  padding: 1.25rem;
  border-radius: 12px;
  background: color-mix(in srgb, Canvas 92%, CanvasText 8%);
}

@media (max-width: 40rem) {
  .notebook-card { padding: 1rem; }
}

Bash
#!/usr/bin/env bash
set -euo pipefail
wp plugin list --status=active --field=name | while read -r name; do
  echo "Active: $name"
done

JSON
{
  "theme": "Notebook",
  "highlight": {
    "engine": "highlight.js",
    "style": "github-dark"
  }
}

SQL
SELECT p.ID, p.post_title, MAX(pm.meta_value) AS last_view
FROM wp_posts AS p
LEFT JOIN wp_postmeta AS pm ON p.ID = pm.post_id AND pm.meta_key = 'views'
WHERE p.post_status = 'publish'
GROUP BY p.ID
ORDER BY last_view DESC NULLS LAST
LIMIT 10;