HTML 预览器

左边贴 HTML，右边即时渲染。纯本地预览，不上传服务器。

41 行 · 1.4 KB · UTF-8

源码

Tab 缩进 · ⌘/Ctrl + S 导出

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>你好，识语</title>
  <style>
    * { box-sizing: border-box; }
    body {
      margin: 0; min-height: 100vh; display: grid; place-items: center;
      background: #faf8f2; color: #12140f;
      font-family: -apple-system, "PingFang SC", system-ui, sans-serif;
    }
    .card {
      width: min(86vw, 320px); padding: 28px 26px;
      border: 1px solid rgba(18, 20, 15, 0.14); border-radius: 3px;
      background: #fff;
    }
    h1 { margin: 0 0 8px; font-size: 20px; letter-spacing: -0.01em; }
    h1::before {
      content: ""; display: inline-block; width: 6px; height: 6px;
      margin-right: 8px; border-radius: 50%; background: #f5a623;
      vertical-align: middle;
    }
    p { margin: 0 0 18px; font-size: 13px; line-height: 1.75; color: #6b6a63; }
    button {
      width: 100%; padding: 10px 0; border: 0; border-radius: 3px;
      background: #12140f; color: #faf8f2; font-size: 13px; cursor: pointer;
      transition: opacity 0.15s ease;
    }
    button:hover { opacity: 0.86; }
  </style>
</head>
<body>
  <div class="card">
    <h1>你好，识语</h1>
    <p>左边改代码，右边立刻变。按 ⌘/Ctrl + Enter 可手动刷新预览。</p>
    <button onclick="this.textContent = '已点击 ' + new Date().toLocaleTimeString()">点我试试</button>
  </div>
</body>
</html>

实时预览编辑中…