配置样式简化方法

样式就是该html显示出的样子，决定了网页的精美程度。

在tools.top/markdown-editor.html导出的html文件太冗长了，每个文件中都有同样的样式代码，因而此处提供简化方法。

介绍一下按步骤操作完成后的效果：默认深色模式，右上角有切换主题按钮，点击后切换浅色，之后会记住选择。

所需文件

这里有两个文件，下载之后放入存放网站文件的文件夹中。

建议直接下载，也可以复制，但是需要注意文件名要和上方所示的一致。

格式

这段代码是框架，进行完上一步下面所有文件都要用这个固定格式。在Markdown转html的网页4markdownhtmlgen.com复制代码填到空缺部分即可。注意有两个地方要填，一是标题部分，二是正文部分。

<!DOCTYPE html>
<html lang="zh-CN">
<script>
(function() {
  const savedTheme = localStorage.getItem('theme');
  if (savedTheme) {
    document.documentElement.setAttribute('data-theme', savedTheme);
  } else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
    document.documentElement.setAttribute('data-theme', 'dark');
  }
})();
</script>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>你的页面标题</title>
    <link rel="stylesheet" href="theme.css">
</head>
<body>
   
  <!-- 此处填写正文 -->
    
    <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/prism.min.js"></script>
    <script src="common.js"></script>
</body>
</html>

作个示例：

<!DOCTYPE html>
<html lang="zh-CN">
<script>
(function() {
  const savedTheme = localStorage.getItem('theme');
  if (savedTheme) {
    document.documentElement.setAttribute('data-theme', savedTheme);
  } else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
    document.documentElement.setAttribute('data-theme', 'dark');
  }
})();
</script>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>你好，世界！</title>
    <link rel="stylesheet" href="theme.css">
</head>
<body>
   
  <!-- 此处填写正文 -->
  <p>Hello World!</p>

    <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/prism.min.js"></script>
    <script src="common.js"></script>
</body>
</html>