HTML to Pug
Convert HTML code to clean, concise Pug (formerly Jade) templating language code
Conversion Settings
Conversion Options
Instructions
Input HTML Code
Paste your HTML code into the input box or type it directly. You can also click the "Load Sample" button to see a demo.
Configure Conversion Options
Select desired options such as compile debug, doctype first, pretty output, omit comments, and choose indentation style.
Convert to Pug
Click the "Convert to Pug" button to start the conversion process.
Get Converted Code
After conversion, you can copy the Pug code to clipboard or download it as a .pug file.
Error Handling
If there are any syntax errors in your HTML code, an error message will be displayed to help you identify and fix the issues.
Differences Between HTML and Pug
Pug (formerly Jade) is a high-performance templating engine that simplifies HTML markup with its cleaner syntax:
- Pug uses indentation instead of closing tags
- Eliminates need for angle brackets and quotes in most cases
- Supports mixins, conditionals, and loops for dynamic content
- Reduces boilerplate code and makes templates more readable
- Can be compiled to HTML for use in web applications
Pug Best Practices
Use consistent indentation (either spaces or tabs) throughout your Pug files
Utilize mixins to reuse code blocks and maintain DRY principle
Take advantage of Pug's built-in filters for content processing
Use includes to break down large templates into manageable pieces
Consider using variables and interpolation for dynamic content generation
Pug Integration with Frameworks
Pug can be easily integrated with popular JavaScript frameworks:
- Express.js: Directly supported as a templating engine
- Vue.js: Can be used with vue-cli-plugin-pug
- React: Works with tools like create-react-app-pug
- Angular: Integration possible through custom builders
- Next.js: Configurable for server-side rendering
Many build tools like Webpack, Gulp, and Grunt also have Pug support through plugins.
Common Pug Patterns
div.container
h1.title Hello World
p.description This is a descriptiona(href="#" class="btn btn-primary") Click me
input(type="text" value="Default value")if user.loggedIn
p Welcome back
else
p Please log in推荐工具
XML Formatter Tool - Free Online XML Code Beautifier and Compressor
Free online XML formatter tool that supports XML code beautification, compression, validation, and other functions, making your XML code more standardized and readable. Provides real-time formatting preview and supports multiple XML formatting options.
XML to JSON - Free Online Conversion Tool
XML to JSON tool can parse and convert XML format strings and JSON format strings, and format the converted strings.
YAML to JSON Converter - Free Online Toolbox
Online YAML (YML) and JSON format conversion tool that supports mutual conversion between YAML data and JSON data, and also supports validating whether the input YAML format data and JSON format data are correct.
Online JavaScript Formatter and Minifier - Beautify, Optimize, and Obfuscate JS Code
A powerful online JavaScript (JS) formatting and code minification tool. Supports custom indentation (tabs or spaces), code folding/expanding, word wrap, one-click beautification, and efficient compression/obfuscation of JS scripts—helping developers improve code readability, reduce file size, and optimize website performance.
HTML to Markdown Tool - Online Toolbox
Free Online HTML to Markdown Tool. It helps you convert HTML code to Markdown format, improving content processing efficiency.