simply-beautiful浏览器端或nodejs运行的html、js、css代码格式化美化插件

simply-beautiful浏览器端或nodejs运行的html、js、css代码格式化美化插件

一款可以在浏览器端或nodejs运行的html、js、css代码格式化美化插件,升值连json代码可以美化。

安装simply-beautiful

一、nodejs下安装

npm install simply-beautiful

const beautify = require('simply-beautiful');

二、浏览器script引用

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/simply-beautiful.js"></script>
<script type="text/javascript">
var beautify = SimplyBeautiful(); // The script above exposes the global variable 'SimplyBeautiful'
</script>

使用 Simply Beautiful

var options = {
indent_size: 2,
// ...
}
console.log(beautify.html('<div><div><div></div></div></div>', options));
console.log(beautify.css('p { color: red; text-align: center; }', options));
console.log(beautify.js("function test() { (function() { console.log('Hello World!') }()); }", options));
console.log(beautify.json('{ "top": { "middle": { "bottom": 69 } } }', options));

配置参数

var options = {
indent_size: 4,//缩进大小
space_before_conditional: true,//判断语句自动空格
jslint_happy: true,//是否设置jslint
max_char: 0,//最大字符
}

完整示例代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" />
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/simply-beautiful.js"></script>
    <script type="text/javascript">
        var beautify = SimplyBeautiful(); // The script above exposes the global variable 'SimplyBeautiful'
          
          var options = {
          indent_size: 2,
          // ...
        }
        console.log(beautify.html('<div><div><div></div></div></div>', options));
        console.log(beautify.css('p { color: red; text-align: center; }', options));
        console.log(beautify.js("function test() { (function() { console.log('Hello World!') }()); }", options));
        console.log(beautify.json('{ "top": { "middle": { "bottom": 69 } } }', options));
    </script>
</head>

<body>
   
</body>

</html>

github地址:https://github.com/itw-creative-works/simply-beautiful
立即下载simply-beautiful.js查看所有js插件

网友评论0

程序员在线工具箱