md-preview-cli-plus 1.0.1 → 1.0.3

package/.editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true

package/README.md

@@ -8,26 +8,55 @@ Markdown 实时预览 + 导出工具
 
 CLI + Web + Markdown 三位一体
 
-由于CLI对兼容性要求高，选择 CommonJS 模块化方式
+由于CLI对系统兼容性要求高，选择 CommonJS 模块化方式
 
 # Getting Started
 
 ```bash
+#for repeated use
+npm i md-preview-cli-plus
 npx md-preview --help #help
-npx md-preview README.md --port 4000 --theme dark --export ./666.html #无需下载 用完删除 不占空间
+npx md-preview README.md --port 5533 --theme dark --export ./666.html #example
+
+#run it once
+npx md-preview-cli-plus --help
+npx md-preview-cli-plus <file_path> [options]
 ```
+
 # Features
-1. **Build CLI Tool:** Use `commander` for argument parsing, help messages (`--help`), versioning (`-V` / `--version`), and error handling.
-2. **Watch File Changes:** Leverage `chokidar` for efficient, cross-platform file watching.
-3. **Open Files:** Use `open` to launch files or apps across platforms.
-4. **Colorful Terminal:** Integrate `chalk` for vibrant console output. 🌈
-5. **Hot Reloading:** Wrap `socket.io` in a `useSocket()` function to watch file changes and trigger browser refresh (similar to Vite).
-6. **HTML Exporting:** Add `--export <path>` to save rendered HTML output to a file.
-7. **Theme Support:** Provide multi-theme styling via `--theme=dark`  or similar options and support custom themes.
-8. **Plugin Architecture:** Support custom parser plugins.
-9. **Packaging & Publishing:** Publish as an NPM package; allow usage via `npx md-preview`.
-10. **Syntax Highlighting:** Use `highlight.js` to render beautifully highlighted code blocks.
+
+**CLI Construction** Built using `commander` for argument parsing, help information (`--help`), version control (`-V`, `--version`), and robust error handling.
+
+**File Watching** Utilizes `chokidar` for efficient, cross-platform file watching with low resource consumption.
+
+**File Opening** Uses `open` to launch files or applications across platforms with high compatibility.
+
+**Colorful Terminal Output** Powered by `chalk` for vibrant CLI messages 🌈, and `highlight.js` for syntax highlighting in code blocks.
+
+**Hot Module Replacement (HMR)** Similar to Vite's HMR: wraps `socket.io` for both client and server.
+
+- The browser uses `useSocket()` to listen for server messages.
+- On notification, the page auto-refreshes.
+- The server watches file changes and pushes updates to the browser.
+
+**HTML Export Feature** Supports `--export` flag to save rendered content as an HTML file.
+
+**Theme Support** Enables theme switching via `--theme=dark` and supports custom themes placed in the `styles/` folder. Reference implementation available in `default.css`.
+
+**Plugin System** Highly flexible plugin architecture with lifecycle hooks.
+
+- Supports custom plugins
+- Configuration via `.previewrc` file and CLI arguments
+- CLI arguments take precedence over config file
+
+**Packaging & Distribution** Published as an npm package.
+
+- Supports direct usage via `npx md-preview-cli ...` without installation.
+
+**Fault Tolerance** If a plugin throws an error, it will be ignored to prevent breaking the core functionality.
+
 # 🔌 Plugin System
+
 1. **Multiple Integration Options:**
    - Pass plugin path via CLI arguments.
    - Place plugins inside a directory (e.g. `plugins/`) and use a configuration file `.previewrc`.
@@ -36,55 +65,47 @@ npx md-preview README.md --port 4000 --theme dark --export ./666.html #无需下
    - `init`
    - `beforeRender`
    - `afterRender`
+
 # 功能细化
-1. 构建CLI 采用commander 解析参数、增加帮助信息--help、版本控制-V --version、错误处理
 
+1. 构建CLI 采用commander 解析参数、增加帮助信息--help、版本控制-V --version、错误处理
 2. 文件监听变化 chokidar 跨平台兼容性好 低耗能
-
-3. 打开open 打开各种文件程序 跨平台兼容性好 
-
-4. 打造彩色终端 🌈chalk
-
-5. 热刷新页面：封装socket.io为useSocket()监听变化并通知刷新页面（类似 Vite）
-
+3. 打开open 打开各种文件程序 跨平台兼容性好
+4. 打造彩色终端 🌈chalk，引入代码高亮 highlight.js
+5. 热刷新HMR：（类似 Vite）封装socket.io客户端和服务端，浏览器使用useSocket()监听服务端消息，有通知则刷新页面，服务端监听文件变化并通知浏览器页面更新
 6. 导出 HTML 功能：增加 --export 参数保存 HTML 文件
-
-7. 多主题支持：通过 --theme=dark 选择不同样式、支持自定义主题
-
+7. 多主题支持：通过 --theme=dark 选择不同样式、支持自定义主题（放在styles文件夹下，代码参考default.css）
 8. 插件机制：支持自定义插件及其生命周期钩子、高灵活度配置，支持插件配置文件.previewrc+CLI参数优先级控制
-
-9. 打包发布：发布为 NPM 包，支持 npx md-preview
-
-10. 引入代码高亮 highlight.js
-
-11. 后续：
-
-    结合图床、插件沙箱机制、多语言支持i18n（自动识别/--lang参数切换）、vitest单元测试、WEB UI模式（拖拽+实时编辑）、项目文档VitePress
+9. 打包发布：发布为 NPM 包，支持 `npx md-preview-cli ...`无需下载，直接使用
+10. 容错机制：如果某插件有错误，无视该插件；
+11. 后续：结合图床、富文本编辑、插件沙箱机制、vitest单元测试
 
 # 插件机制
 
 1. 任选其一：可通过命令行传插件地址;也可以将插件放入某个目录下（例如plugins/）并设置插件配置文件`.previewrc`;如有冲突，则`.previewrc`配置优先级小于命令行参数
 2. 支持自定义插件，插件系统生命周期钩子 init、beforeRender/afterRender
+
 # 项目结构
+
 ```bash
-# 旧设定
 md-preview/
 ├── bin/
 │   └── cli.js              # CLI 命令入口
 ├── lib/
-│   ├── plugins.js           # 插件加载器
+│   ├── pluginManager.js           # 插件加载器
 │   ├── preview.js          # 启动本地服务
 │   └── renderMarkdown.js   # Markdown 渲染函数
+│   └── loadConfig.js   # 读取配置文件 .previewrc
+│   └── loader.js   # 读取某文件夹下所有插件
 ├── public/
-│   └── template.html       # HTML 模板页面
+│   └── hmrServer.js #hmr socket服务器
+│   └── useSocket.js #hmr socket客户端
 ├── styles/
-│   └── style.css           # 样式（可替换主题）
+│   └── default.css           # 默认主题样式
+│   └── dark.css           # 暗黑主题样式
 ├── README.md
 ├── package.json
 └── .gitignore
 plugins/
-├── copyright-plugin.js      # 示例插件
-```
-```js
-console.log("hello world")
+├── copyright-plugin.js      # 示例插件 影响最底部文字 可直接删除
 ```

package/bin/cli.js

@@ -1,59 +1,55 @@
 #!/usr/bin/env node
 //const inquirer=require('inquirer')
-const { program } = require('commander')
-const path = require('path')
-const startPreview = require('../lib/preview')
-const pluginManager = require('../lib/pluginManager')
-const loadConfig=require('../lib/loadConfig')
-const loadPlugins=require('../lib/loader')
+const { program } = require('commander');
+const path = require('path');
+const startPreview = require('../lib/preview');
+const pluginManager = require('../lib/pluginManager');
+const loadConfig = require('../lib/loadConfig');
+const loadPlugins = require('../lib/loader');
 
 //帮助信息自动生成，不需要手动写
 //默认命令触发条件就是和基本信息分开
-let file_d='path to the Markdown file'
-let port_d='specify preview port'
-let theme_d='choose theme style: default/dark'
-let export_d='export HTML to a given path (optional)'
-let plugin_d='load your plugins'
+let file_d = 'path to the Markdown file';
+let port_d = 'specify preview port';
+let theme_d = 'choose theme style: default/dark';
+let export_d = 'export HTML to a given path (optional)';
+let plugin_d = 'load your plugins';
+
+program.name('md-preview').description('Markdown real-time preview CLI').version('1.0.0');
 
 program
-  .name('md-preview')
-  .description('Markdown real-time preview CLI')
-  .version('1.0.0')
-  
-  program
-      .argument('<file>',`${file_d}` )
-      .option('--port <port>',`${port_d}` , 3000)
-      .option('--theme <theme>',`${theme_d}` , 'default')
-      .option('--export <path>',`${export_d}` , null)
-      //修改CLI支持--plugin参数 可多个
-      .option('--plugin <path...>', `${plugin_d}`)//...是commander里的rest参数 
-      .action((file, options) => {
-        //console.log(options)
-
-        //调用加载配置并合并参数
-        // 加载 .previewrc
-        const rc = loadConfig()
-
-        // 合并 theme 设置（命令行优先生效）
-        options.theme = options.theme || rc.theme || 'default'
-
-        // 加载插件（来自 CLI 参数 + .previewrc + plugins/ 目录）
-        options.plugin = Array.from(new Set([
-          ...(loadPlugins(rc.pluginsFolder) || []),
-          ...(options.plugin || [])
-        ]));
-        //console.log(options.plugin)
-        // 注册所有传入的插件
-        if (options.plugin && options.plugin.length) {
-          for (const pluginPath of options.plugin) {
-            const abs = path.resolve(process.cwd(), pluginPath)
-            const plugin = require(abs)
-            pluginManager.use(plugin)
-          }
-        }
-
-        const absolutePath = path.resolve(process.cwd(), file);
-        startPreview(absolutePath, options,pluginManager);
-      });
-
-program.parse() // 默认使用 process.argv
+  .argument('<file>', `${file_d}`)
+  .option('--port <port>', `${port_d}`, 7777)
+  .option('--theme <theme>', `${theme_d}`, 'default')
+  .option('--export <path>', `${export_d}`, null)
+  //修改CLI支持--plugin参数 可多个
+  .option('--plugin <path...>', `${plugin_d}`) //...是commander里的rest参数
+  .action((file, options) => {
+    //console.log(options)
+
+    //调用加载配置并合并参数
+    // 加载 .previewrc
+    const rc = loadConfig();
+
+    // 合并 theme 设置（命令行优先生效）
+    options.theme = options.theme || rc.theme || 'default';
+
+    // 加载插件（来自 CLI 参数 + .previewrc + plugins/ 目录）
+    options.plugin = Array.from(
+      new Set([...(loadPlugins(rc.pluginsFolder) || []), ...(options.plugin || [])])
+    );
+    //console.log(options.plugin)
+    // 注册所有传入的插件
+    if (options.plugin && options.plugin.length) {
+      for (const pluginPath of options.plugin) {
+        const abs = path.resolve(process.cwd(), pluginPath);
+        const plugin = require(abs);
+        pluginManager.use(plugin); //集合起来统一注册
+      }
+    }
+
+    const absolutePath = path.resolve(process.cwd(), file);
+    startPreview(absolutePath, options, pluginManager);
+  });
+
+program.parse(); // 默认使用 process.argv

package/lib/loadConfig.js

@@ -1,21 +1,20 @@
 //配置读取模块 lib/loadConfig.js
 
-const fs = require('fs')
-const path = require('path')
+const fs = require('fs');
+const path = require('path');
 
 function loadConfig() {
-  const configPath = path.resolve(process.cwd(), '.previewrc')
-  if (!fs.existsSync(configPath)) return {}
+  const configPath = path.resolve(process.cwd(), '.previewrc');
+  if (!fs.existsSync(configPath)) return {};
 
   try {
-    const raw = fs.readFileSync(configPath, 'utf-8')
-    const config = JSON.parse(raw)
-    return config
+    const raw = fs.readFileSync(configPath, 'utf-8');
+    const config = JSON.parse(raw);
+    return config;
   } catch (e) {
-    console.warn('⚠️ Failed to load .previewrc :', e.message)
-    return {}
+    console.warn('⚠️ Failed to load .previewrc :', e.message);
+    return {};
   }
 }
 
-module.exports = loadConfig
-
+module.exports = loadConfig;

package/lib/loader.js

@@ -1,30 +1,30 @@
-//loader.js 
+//loader.js
 //把配置的插件都加载放入并返回
-const path = require('path')
-const fs = require('fs')
+const path = require('path');
+const fs = require('fs');
 
 function loadPlugins(folder_path) {
-  let plugins = []
-  //把folder_path中每个目录里的插件注册完
-  for(const folder of folder_path){
-    const pluginsDir = path.resolve(process.cwd(), folder);
-  
-    fs.readdirSync(pluginsDir).forEach(file => {
-      const fullPath = path.join(pluginsDir, file);
+  let plugins = [];
+  //把folder_path目录下的插件注册完
+  if (Array.isArray(folder_path)) {
+    for (const folder of folder_path) {
+      const pluginsDir = path.resolve(process.cwd(), folder);
 
-      // 只加载 .js 文件
-      if (fs.statSync(fullPath).isFile() && file.endsWith('.js')) {
+      fs.readdirSync(pluginsDir).forEach((file) => {
+        const fullPath = path.join(pluginsDir, file);
+
+        // 只加载 .js 文件
+        if (fs.statSync(fullPath).isFile() && file.endsWith('.js')) {
           //const plugin = require(fullPath);
-        plugins.push(fullPath)
-        
-      }else console.warn(`⚠️ Plugin not found at ${fullPath}`)
-    });
+          plugins.push(fullPath);
+        } else console.warn(`⚠️ Plugin not found at ${fullPath}`);
+      });
+    }
+  } else {
+    console.log(`⚠️ folder_path is not an array, please check your config.`);
   }
-  
-  return plugins
-}
 
-module.exports = loadPlugins
+  return plugins;
+}
 
-    
-    
+module.exports = loadPlugins;

package/lib/pluginManager.js

@@ -1,10 +1,10 @@
 //lib/pluginManager.js
-const fs = require('fs')
-const path = require('path')
+const fs = require('fs');
+const path = require('path');
 
 class PluginManager {
   constructor() {
-    this.plugins = []
+    this.plugins = [];
   }
   // 注册插件
   use(plugin) {
@@ -12,47 +12,47 @@ class PluginManager {
       // 调用 init 钩子
       if (typeof plugin.init === 'function') {
         try {
-          plugin.init()
+          plugin.init();
         } catch (e) {
-          console.warn(`Failed to init plugin： ${plugin.name} `, e)
+          console.warn(`Failed to init plugin： ${plugin.name} `, e);
         }
         console.log(`✅ Loaded plugin: ${plugin.name}`);
       }
-      this.plugins.push(plugin)
+      this.plugins.push(plugin);
     } else {
-      console.warn(`Invalid plugin：${plugin}`)
+      console.warn(`Invalid plugin：${plugin}`);
     }
-    return this // 支持链式调用
+    return this; // 支持链式调用
   }
 
-  allBeforeRender(content,theme='default'){
-  try{
-    // 插件处理原始内容
-    for (const plugin of this.plugins) {
+  allBeforeRender(content, theme = 'default') {
+    try {
+      // 插件处理原始内容
+      for (const plugin of this.plugins) {
         if (plugin.beforeRender) {
-        content = plugin.beforeRender(content, { theme })
+          content = plugin.beforeRender(content, { theme });
         }
-    }
-    return content;
-  }catch(err){
-    console.error(`❌ Failed to use the plugin: ${err.message}`)
+      }
+      return content;
+    } catch (err) {
+      console.error(`❌ Failed to use the plugin: ${err.message}`);
     }
   }
 
- allAfterRender(html,theme='default'){
-  // 插件处理 HTML 内容
-  try{
-    for (const plugin of this.plugins) {
-    if (plugin.afterRender) {
-      html = plugin.afterRender(html, { theme })
-    }
+  allAfterRender(html, theme = 'default') {
+    // 插件处理 HTML 内容
+    try {
+      for (const plugin of this.plugins) {
+        if (plugin.afterRender) {
+          html = plugin.afterRender(html, { theme });
+        }
+      }
+      return html;
+    } catch (err) {
+      console.error(`❌ Failed to use the plugin:${err.message}`);
     }
-    return html;
-  }catch(err){
-    console.error(`❌ Failed to use the plugin:${err.message}`)
   }
-}
   // 渲染流程，交给插件机制外部
 }
 
-module.exports = new PluginManager()
+module.exports = new PluginManager();

package/lib/preview.js

@@ -1,46 +1,35 @@
-const express = require('express')
-const fs = require('fs')
-const path = require('path')
-const {Server} =require('socket.io')
-const chokidar = require('chokidar')
-const markdownToHtml = require('./renderMarkdown')
-const open = require('open')
-const chalk = require('chalk')
+const express = require('express');
+const fs = require('fs');
+const markdownToHtml = require('./renderMarkdown');
+const hmrServer = require('../public/hmrServer');
+const open = require('open');
+const chalk = require('chalk');
+const path = require('path');
 
-function startPreview(filePath, options,pluginManager) {
-  const app = express()
-  const port = options.port || 3000
+function startPreview(filePath, options, pluginManager) {
+  const app = express();
+  const port = options.port || 3000;
 
   app.get('/', (req, res) => {
-    let html = markdownToHtml(filePath, options.theme,options.port,pluginManager)
-    html=pluginManager.allAfterRender(html,options.theme)
-    if(options.export){
+    let html = markdownToHtml(filePath, options.theme, options.port, pluginManager);
+    html = pluginManager.allAfterRender(html, options.theme) ?? html;
+    if (options.export) {
       const exportPath = path.resolve(process.cwd(), options.export);
       fs.writeFileSync(exportPath, html);
       console.log(chalk.green(`✅ HTML exported to: ${exportPath}`));
     }
-    res.send(html)
-  })
+    res.send(html);
+  });
 
-  const watcher = chokidar.watch(filePath)
-  
-  app.use(express.static(path.join(__dirname, '../styles')))
-  app.use(express.static(path.join(__dirname, '../public')))
+  app.use(express.static(path.join(__dirname, '../styles')));
+  app.use(express.static(path.join(__dirname, '../public')));
 
-  const server=app.listen(port, () => {
-    console.log(chalk.cyan(`🚀 Local preview started at http://localhost:${port}`))
-    open(`http://localhost:${port}`)
-  })//返回http.Server对象
-  const io = new Server(server, {
-    cors: { origin: '*' }
-  })
-  io.on('connection', (socket) => {
-  //console.log('connecting...')
-  })
-  watcher.on('change', () => {
-    console.log(chalk.green('📄 Markdown file updated, refreshing page automatically.'))
-    io.emit('update')
-  })
+  const server = app.listen(port, () => {
+    console.log(chalk.cyan(`🚀 Local preview started at http://localhost:${port}`));
+    open(`http://localhost:${port}`);
+  }); //返回http.Server对象
+
+  hmrServer(server, filePath);
 }
 
-module.exports = startPreview
+module.exports = startPreview;

package/lib/renderMarkdown.js

@@ -1,17 +1,17 @@
-const fs = require('fs')
-const markdownIt = require('markdown-it')
+const fs = require('fs');
+const markdownIt = require('markdown-it');
 
-function markdownToHtml(filePath, theme = 'default',port,pluginManager) {
+function markdownToHtml(filePath, theme = 'default', port, pluginManager) {
   const md = new markdownIt({
     html: true,
-    linkify: true,//自动识别链接文本
-    typographer: true//排版符号美化
-  })
+    linkify: true, //自动识别链接文本
+    typographer: true, //排版符号美化
+  });
 
-  let markdownContent = fs.readFileSync(filePath, 'utf-8')
-  markdownContent=pluginManager.allBeforeRender(markdownContent,theme)
-  
-  let htmlContent = md.render(markdownContent)
+  let markdownContent = fs.readFileSync(filePath, 'utf-8');
+  markdownContent = pluginManager.allBeforeRender(markdownContent, theme) ?? markdownContent;
+
+  let htmlContent = md.render(markdownContent);
 
   return `
 <!DOCTYPE html>
@@ -43,7 +43,6 @@ function markdownToHtml(filePath, theme = 'default',port,pluginManager) {
   </script>
 </body>
 </html>`;
-
 }
 
-module.exports = markdownToHtml
+module.exports = markdownToHtml;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "md-preview-cli-plus",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "md real-time preview + export",
   "keywords": [
     "markdown",
@@ -24,7 +24,12 @@
     "md-preview": "./bin/cli.js"
   },
   "scripts": {
-    "start": "node bin/cli.js"
+    "start": "node bin/cli.js",
+    "lint": "eslint . --ext .js,.ts",
+    "prepare": "husky"
+  },
+  "lint-staged": {
+    "*.js": ["prettier --write"]
   },
   "dependencies": {
     "chalk": "^4.1.2",
@@ -32,8 +37,15 @@
     "commander": "^14.0.0",
     "express": "^5.1.0",
     "markdown-it": "^14.1.0",
-    "mongoose": "^8.16.3",
     "open": "^8.4.0",
     "socket.io": "^4.8.1"
+  },
+  "devDependencies": {
+    "eslint": "^9.32.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-prettier": "^5.5.3",
+    "husky": "^9.1.7",
+    "lint-staged": "^16.1.2",
+    "prettier": "^3.6.2"
   }
 }

package/plugins/copyright-plugin.js

@@ -1,14 +1,14 @@
 //This is also a sample plugin.
 module.exports = {
   name: 'copyright-plugin',
-  
+
   // 在渲染前调用，可修改原始内容
   beforeRender(content, options) {
-    return content
+    return content;
   },
 
   // 渲染为 HTML 后调用，可修改 HTML 字符串
   afterRender(html, options) {
-    return html + `<footer><p style="text-align:center;color:#aaa;">© 70v-Yoyo </p></footer>`
-  }
-}
+    return html + `<footer><p style="text-align:center;color:#aaa;">© 2025 </p></footer>`;
+  },
+};

package/public/hmrServer.js

@@ -0,0 +1,18 @@
+const { Server } = require('socket.io');
+const chokidar = require('chokidar');
+const chalk = require('chalk');
+
+function hmrServer(server, filePath) {
+  const watcher = chokidar.watch(filePath);
+  const io = new Server(server, {
+    cors: { origin: '*' },
+  });
+  io.on('connection', (socket) => {
+    //console.log('connect successfully')
+  });
+  watcher.on('change', () => {
+    console.log(chalk.green('📄 Markdown file updated, refreshing page automatically.'));
+    io.emit('update');
+  });
+}
+module.exports = hmrServer;

package/public/useSocket.js

@@ -1,24 +1,24 @@
 // useSocket.js（浏览器端模块，支持原生或 Vite 项目）
-import { io } from 'https://cdn.socket.io/4.7.5/socket.io.esm.min.js'
+import { io } from 'https://cdn.socket.io/4.7.5/socket.io.esm.min.js';
 
 export function useSocket({ serverUrl, onUpdate }) {
-  const socket = io(serverUrl)
+  const socket = io(serverUrl);
 
   socket.on('connect', () => {
-    console.log('✅ 已连接 Socket.IO 服务')
-  })
+    console.log('✅ 已连接 Socket.IO 服务');
+  });
 
   socket.on('disconnect', () => {
-    console.warn('⚠️ Socket 断开连接')
-  })
+    console.warn('⚠️ Socket 断开连接');
+  });
 
   // 接收后端推送的 HTML 内容
   socket.on('update', (htmlContent) => {
-    console.log('📥 收到 update 事件')
+    console.log('📥 收到 update 事件');
     if (typeof onUpdate === 'function') {
-      onUpdate(htmlContent)
+      onUpdate(htmlContent);
     }
-  })
+  });
 
-  return socket
+  return socket;
 }

package/styles/dark.css

@@ -6,7 +6,12 @@ body {
   padding: 2rem;
 }
 
-h1, h2, h3, h4, h5, h6 {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
   color: #ffffff;
   border-bottom: 1px solid #333;
 }
@@ -16,7 +21,8 @@ a {
   text-decoration: none;
 }
 
-code, pre {
+code,
+pre {
   background-color: #2d2d2d;
   color: #f8f8f2;
   padding: 0.2em 0.4em;
@@ -35,7 +41,8 @@ table {
   width: 100%;
 }
 
-th, td {
+th,
+td {
   border: 1px solid #444;
   padding: 0.5em;
 }

package/styles/default.css

@@ -7,7 +7,9 @@ body {
   color: #333;
 }
 
-h1, h2, h3 {
+h1,
+h2,
+h3 {
   border-bottom: 1px solid #ddd;
   padding-bottom: 4px;
 }