您的位置 首页 > 软件教程

_html 批量格式化工具

1.Sublime Text中如何对杂乱的代码进行格式化

2.怎么利用ja格式化html

3.notepad++如何html语句格式化

4.怎么在Notepad++中使用Tidy2来格式化HTML文档

5.怎样格式化一个编排不好的html文档呢,比如一种方式:将文档用Eclipse打开,可以ctrl+shift+f排版。

6.Sublime text 3 如何格式化HTML代码

_html 批量格式化工具

var?HTMLFormat?=?(function()?{

function?style_html(html_source,?indent_size,?indent_character,?max_char)?{

var?Parser,?multi_parser;

function?Parser()?{

this.pos?=?0;

this.token?=?'';

this.current_mode?=?'CONTENT';

this.tags?=?{

parent:?'parent1',

parentcount:?1,

parent1:?''

};

this.tag_type?=?'';

this.token_text?=?this.last_token?=?this.last_text?=?this.token_type?=?'';

this.Utils?=?{

whitespace:?"\n\r\t?".split(''),

single_token:?'br,input,link,meta,!doctype,basefont,base,area,hr,wbr,param,img,isindex,?xml,embed'.split(','),

extra_liners:?'head,body,/html'.split(','),

in_array:?function(what,?arr)?{

for?(var?i?=?0;?i?<?arr.length;?i++)?{

if?(what?===?arr[i])?{

return?true;

}

}

return?false;

}

}

this.get_content?=?function()?{

var?char?=?'';

var?content?=?[];

var?space?=?false;

while?(this.input.charAt(this.pos)?!==?'<')?{

if?(this.pos?>=?this.input.length)?{

return?content.length?content.join('')?:?['',?'TK_EOF'];

}

char?=?this.input.charAt(this.pos);

this.pos++;

this.line_char_count++;

if?(this.Utils.in_array(char,?this.Utils.whitespace))?{

if?(content.length)?{

space?=?true;

}

this.line_char_count--;

continue;

}?else?if?(space)?{

if?(this.line_char_count?>=?this.max_char)?{

content.push('\n');

for?(var?i?=?0;?i?<?this.indent_level;?i++)?{

content.push(this.indent_string);

}

this.line_char_count?=?0;

}?else?{

content.push('?');

this.line_char_count++;

}

space?=?false;

}

content.push(char);

}

return?content.length?content.join('')?:?'';

}

this.get_script?=?function()?{

var?char?=?'';

var?content?=?[];

var?reg_match?=?new?RegExp('\<\/script'?+?'\>',?'igm');

reg_match.lastIndex?=?this.pos;

var?reg_array?=?reg_match.exec(this.input);

var?end_script?=?reg_array?reg_array.index?:?this.input.length;

while?(this.pos?<?end_script)?{

if?(this.pos?>=?this.input.length)?{

return?content.length?content.join('')?:?['',?'TK_EOF'];

}

char?=?this.input.charAt(this.pos);

this.pos++;

content.push(char);

}

return?content.length?content.join('')?:?'';

}

this.record_tag?=?function(tag)?{

if?(this.tags[tag?+?'count'])?{

this.tags[tag?+?'count']++;

this.tags[tag?+?this.tags[tag?+?'count']]?=?this.indent_level;

}?else?{

this.tags[tag?+?'count']?=?1;

this.tags[tag?+?this.tags[tag?+?'count']]?=?this.indent_level;

}

this.tags[tag?+?this.tags[tag?+?'count']?+?'parent']?=?this.tags.parent;

this.tags.parent?=?tag?+?this.tags[tag?+?'count'];

}

this.retrieve_tag?=?function(tag)?{

if?(this.tags[tag?+?'count'])?{

var?temp_parent?=?this.tags.parent;

while?(temp_parent)?{

if?(tag?+?this.tags[tag?+?'count']?===?temp_parent)?{

break;

}

temp_parent?=?this.tags[temp_parent?+?'parent'];

}

if?(temp_parent)?{

this.indent_level?=?this.tags[tag?+?this.tags[tag?+?'count']];

this.tags.parent?=?this.tags[temp_parent?+?'parent'];

}

delete?this.tags[tag?+?this.tags[tag?+?'count']?+?'parent'];

delete?this.tags[tag?+?this.tags[tag?+?'count']];

if?(this.tags[tag?+?'count']?==?1)?{

delete?this.tags[tag?+?'count'];

}?else?{

this.tags[tag?+?'count']--;

}

}

}

this.get_tag?=?function()?{

var?char?=?'';

var?content?=?[];

var?space?=?false;

do?{

if?(this.pos?>=?this.input.length)?{

return?content.length?content.join('')?:?['',?'TK_EOF'];

}

char?=?this.input.charAt(this.pos);

this.pos++;

this.line_char_count++;

if?(this.Utils.in_array(char,?this.Utils.whitespace))?{

space?=?true;

this.line_char_count--;

continue;

}

if?(char?===?"'"?||?char?===?'"')?{

if?(!content[1]?||?content[1]?!==?'!')?{

char?+=?this.get_unformatted(char);

space?=?true;

}

}

if?(char?===?'=')?{

space?=?false;

}

if?(content.length?&&?content[content.length?-?1]?!==?'='?&&?char?!==?'>'?&&?space)?{

if?(this.line_char_count?>=?this.max_char)?{

this.print_newline(false,?content);

this.line_char_count?=?0;

}?else?{

content.push('?');

this.line_char_count++;

}

space?=?false;

}

content.push(char);

}?while?(char?!==?'>');

var?tag_complete?=?content.join('');

var?tag_index;

if?(tag_complete.indexOf('?')?!=?-1)?{

tag_index?=?tag_complete.indexOf('?');

}?else?{

tag_index?=?tag_complete.indexOf('>');

}

var?tag_check?=?tag_complete.substring(1,?tag_index).toLowerCase();

if?(tag_complete.charAt(tag_complete.length?-?2)?===?'/'?||?this.Utils.in_array(tag_check,?this.Utils.single_token))?{

this.tag_type?=?'SINGLE';

}?else?if?(tag_check?===?'script')?{

this.record_tag(tag_check);

this.tag_type?=?'SCRIPT';

}?else?if?(tag_check?===?'style')?{

this.record_tag(tag_check);

this.tag_type?=?'STYLE';

}?else?if?(tag_check.charAt(0)?===?'!')?{

if?(tag_check.indexOf('[if')?!=?-1)?{

if?(tag_complete.indexOf('!IE')?!=?-1)?{

var?comment?=?this.get_unformatted('-->',?tag_complete);

content.push(comment);

}

this.tag_type?=?'START';

}?else?if?(tag_check.indexOf('[endif')?!=?-1)?{

this.tag_type?=?'END';

this.unindent();

}?else?if?(tag_check.indexOf('[cdata[')?!=?-1)?{

var?comment?=?this.get_unformatted(']]>',?tag_complete);

content.push(comment);

this.tag_type?=?'SINGLE';

}?else?{

var?comment?=?this.get_unformatted('-->',?tag_complete);

content.push(comment);

this.tag_type?=?'SINGLE';

}

}?else?{

if?(tag_check.charAt(0)?===?'/')?{

this.retrieve_tag(tag_check.substring(1));

this.tag_type?=?'END';

}?else?{

this.record_tag(tag_check);

this.tag_type?=?'START';

}

if?(this.Utils.in_array(tag_check,?this.Utils.extra_liners))?{

this.print_newline(true,?this.output);

}

}

return?content.join('');

}

this.get_unformatted?=?function(delimiter,?orig_tag)?{

if?(orig_tag?&&?orig_tag.indexOf(delimiter)?!=?-1)?{

return?'';

}

var?char?=?'';

var?content?=?'';

var?space?=?true;

do?{

char?=?this.input.charAt(this.pos);

this.pos++

if?(this.Utils.in_array(char,?this.Utils.whitespace))?{

if?(!space)?{

this.line_char_count--;

continue;

}

if?(char?===?'\n'?||?char?===?'\r')?{

content?+=?'\n';

for?(var?i?=?0;?i?<?this.indent_level;?i++)?{

content?+=?this.indent_string;

}

space?=?false;

this.line_char_count?=?0;

continue;

}

}

content?+=?char;

this.line_char_count++;

space?=?true;

}?while?(content.indexOf(delimiter)?==?-1);

return?content;

}

this.get_token?=?function()?{

var?token;

if?(this.last_token?===?'TK_T_SCRIPT')?{

var?temp_token?=?this.get_script();

if?(typeof?temp_token?!==?'string')?{

return?temp_token;

}

//token?=?js_beautify(temp_token,?this.indent_size,?this.indent_character,?this.indent_level);

//return?[token,?'TK_CONTENT'];

return?[temp_token,?'TK_CONTENT'];

}

if?(this.current_mode?===?'CONTENT')?{

token?=?this.get_content();

if?(typeof?token?!==?'string')?{

return?token;

}?else?{

return?[token,?'TK_CONTENT'];

}

}

if?(this.current_mode?===?'T')?{

token?=?this.get_tag();

if?(typeof?token?!==?'string')?{

return?token;

}?else?{

var?tag_name_type?=?'TK_T_'?+?this.tag_type;

return?[token,?tag_name_type];

}

}

}

this.printer?=?function(js_source,?indent_character,?indent_size,?max_char)?{

this.input?=?js_source?||?'';

this.output?=?[];

this.indent_character?=?indent_character?||?'?';

this.indent_string?=?'';

this.indent_size?=?indent_size?||?2;

this.indent_level?=?0;

this.max_char?=?max_char?||?70;

this.line_char_count?=?0;

for?(var?i?=?0;?i?<?this.indent_size;?i++)?{

this.indent_string?+=?this.indent_character;

}

this.print_newline?=?function(ignore,?arr)?{

this.line_char_count?=?0;

if?(!arr?||?!arr.length)?{

return;

}

if?(!ignore)?{

while?(this.Utils.in_array(arr[arr.length?-?1],?this.Utils.whitespace))?{

arr.pop();

}

}

arr.push('\n');

for?(var?i?=?0;?i?<?this.indent_level;?i++)?{

arr.push(this.indent_string);

}

}

this.print_token?=?function(text)?{

this.output.push(text);

}

this.indent?=?function()?{

this.indent_level++;

}

this.unindent?=?function()?{

if?(this.indent_level?>?0)?{

this.indent_level--;

}

}

}

return?this;

}

multi_parser?=?new?Parser();

multi_parser.printer(html_source,?indent_character,?indent_size);

while?(true)?{

var?t?=?multi_parser.get_token();

multi_parser.token_text?=?t[0];

multi_parser.token_type?=?t[1];

if?(multi_parser.token_type?===?'TK_EOF')?{

break;

}

switch?(multi_parser.token_type)?{

case?'TK_T_START':

case?'TK_T_SCRIPT':

case?'TK_T_STYLE':

multi_parser.print_newline(false,?multi_parser.output);

multi_parser.print_token(multi_parser.token_text);

multi_parser.indent();

multi_parser.current_mode?=?'CONTENT';

break;

case?'TK_T_END':

multi_parser.print_newline(true,?multi_parser.output);

multi_parser.print_token(multi_parser.token_text);

multi_parser.current_mode?=?'CONTENT';

break;

case?'TK_T_SINGLE':

multi_parser.print_newline(false,?multi_parser.output);

multi_parser.print_token(multi_parser.token_text);

multi_parser.current_mode?=?'CONTENT';

break;

case?'TK_CONTENT':

if?(multi_parser.token_text?!==?'')?{

multi_parser.print_newline(false,?multi_parser.output);

multi_parser.print_token(multi_parser.token_text);

}

multi_parser.current_mode?=?'T';

break;

}

multi_parser.last_token?=?multi_parser.token_type;

multi_parser.last_text?=?multi_parser.token_text;

}

return?multi_parser.output.join('');

}

return?function(data)?{

var?dataHolder?=?['__dataHolder_',?[Math.random(),?Math.random(),?Math.random(),?Math.random()].join('_').replace(/[^0-9]/g,?'_'),?'_'].join('_');

var?dataHolders?=?{};

var?index?=?0;

data?=?data.replace(/(\")(data:[^\"]*)(\")/g,?function($0,?$1,?$2,?$3)?{

var?name?=?dataHolder?+?index++;

dataHolders[name]?=?$2;

return?$1?+?name?+?$3;

})

data?=?style_html(data,?1,?'\t',?0x10000000);

data?=?data.replace(new?RegExp(dataHolder?+?'[0-9]+',?'g'),?function($0)?{

return?dataHolders[$0];

});

return?data;

}

})();

//?demo:

var?formattedHtml?=?HTMLFormat('<div><span><br>xxx</span></div>');

Sublime Text中如何对杂乱的代码进行格式化

可以自动格式化的。

先打开Brackets编辑器,可以看到左边是目录,右边是代码区。

打开一个HTML文件,右上角有个闪电样子的图标就是实时预览功能,需要电脑中安装Chrome浏览器

其他的编辑器比如sublime之所以强大是因为有很多插件的支持,可以打造最适合自己的编辑器,那Brackets有没有插件呢?经过一番寻找终于找到:

点击文件--扩展管理器

可以看到里面有很多插件

3、而格式化代码是比较常用的功能,里面会不会有呢?先模糊搜索一下把,输入format关键字搜索,看见的第一个插件Beautify,名字听起来不 错,再看下介绍:Format JaScript, HTML, and CSS files,正和我们的需要,点击安装它:

安装完成先别着急关掉扩展管理器,点击Beautify下面的更多信息,进入它在github的主页,往下看可以看到这样一行字:

Format HTML, CSS, and JaScript files by Edit > Beautify menu or Cmd-Alt-L(Mac) / Ctrl-Alt-L(Win) key.

也就是说从Edit-Beautify可以找到它,而且快捷键是Ctrl+Alt+L

怎么利用ja格式化html

我们使用Sublime Text编辑文件的时候,经常会遇到一些杂乱无章的内容,那么如何对这些杂乱的内容进行格式化呢?下面我就给大家分享一下。

工具/材料

Sublime Text

首先我们打开Sublime Text软件,新建一个HTML文件,然后在文件中键入一些杂乱的代码,如下图所示

接下来点击顶部的首选项菜单,然后选择下拉菜单中的Package Control选项,如下图所示

在弹出的Package Control界面中输入Ins,Sublime会自动模糊查询相应的内容,我们选择Install Package即可,如下图所示

接下来会进入Install Package界面,我们在输入框里面输入html-css-js prettify,选择第一个按回车键进行安装,如下图所示

安装完毕以后我们点击顶部的工具菜单,然后查看下拉菜单中是否有HTML/CSS/JS Prettify选项,如果有则证明安装成功,如下图所示

回到刚才新建的HTML文件中,我们按ctrl+shift+h组合键以后你会发现刚才杂乱的代码都立刻被格式化了,如下图所示

另外你也可以对Prettify插件进行一些设置,这个时候你点击工具下面的HTML/CSS/JS Prettify选项,然后选择Plugin Options选项即可

最后如果你想格式化其他类型的代码文件,比如SQL语言的,那么你就需要找针对SQL语言的格式化插件了,这里我教大家一招,在命令模式中输入Format就可以调出各种语言的格式化插件了,大家自己选择即可

notepad++如何html语句格式化

ctrl+shift+f(默认)

可以找在配置里面找到格式化模板,在keys里面设置快捷键

在windows->preferences中搜索templates

在windows->preferences中搜索keys

如果是程序实现,里面好像有个标准html流输出的实现,具体忘记了,自己找找。。。

怎么在Notepad++中使用Tidy2来格式化HTML文档

notepad++本身只能选择语言做关键词高亮显示。

html格式化需要插件。

1 打开Notepad++软件,选择插件菜单——Plugin Manager——Show Plugin Manager,在插件列表中找到tidy2。

2 点击“install”按钮,进行插件安装。

3 完成第二步的安装后,notepad++软件会自动重启下,然后你就可以在菜单“插件”下多一个“Tidy2”菜单。然后你可以按你的需要对html进行格式化。

怎样格式化一个编排不好的html文档呢,比如一种方式:将文档用Eclipse打开,可以ctrl+shift+f排版。

首先,打开NotePad文本编辑器,如下图所示。

然后点击菜单栏上的“插件(P)”选项,在弹出来的下拉框中选择“Plugin Manager”-->“ShowPlugin Manager”,如下图所示。

进入到“Plugin Manager”窗口,选择“Available”选项卡,在里面找到“Tidy2”选项,选中对应的单选框,然后点击“Install”按钮,如下图所示。

等待下载Tidy2文件,等到进度条刷新完后,即安装完成。然后重启电脑,插件就可以生效了。

在线安装有时会出现安装失败的情况,如果遇到这种情况最好就手动安装。首先我们下载好Tidy2的动态链接库Tidy2.dll(去CSDN上下载,网址不方便写)。

将下载的Tidy2.dll文件放在Notepad++安装目录下的plugins文件夹下(我这里的路径是D:\Notepad++\plugins,一般的默认安装目录是C:\Program Files\Notepad++\plugins),如下图所示。

将文件放到Plugins文件夹下后,重启Notepad++软件,再次点击菜单栏上的“插件(P)”,在下拉框中便可以看到“Tidy2”选项,如下图所示。

我们打开一个格式散乱的HTML文档,如下图所示,然后我们点击“插件(P)”-->“Tidy2”-->“Tidy(config 1-3)”。

可以看到散乱的HTML文件已经被格式化了,如下图所示,但貌似多出了一行<meta name="generator" ....>没什么影响,当然你不喜欢可以删掉它。

Sublime text 3 如何格式化HTML代码

第一步:依次点击菜单栏的?"编辑"?-?"首选参数"?-?"代码格式"?;

(注:Dreamweer版本不同可能会有些许差异)

第二步:格式设置你可以参考我的,也可以根据个人喜好设置:见图

第三步:依次点击菜单栏的?"命令"?-"应用源格式",现在的代码是不是好看多了?!

使用Sublime text 3 编写代码是一种享受,使用Sublime text 3 格式化HTML代码,需要安装插件,具体安装步骤如下:

1、打开菜单->首选项->插件控制,输入 install package

2、等待程序进入插件管理功能,再输入插件名称:T

3、点击安装插件。

4、插件安装成功后,在需要格式化的HTML代码中,选中代码,然后按Ctrl+Alt+F对代码进行格式化。.....

热门文章