Sublime Text 2: Format HTML tags' content in o

2019-03-30 11:26发布

站内文章 / 前沿技术
43 0 0

问题:

Ok, my situation is a bit different than all the threads here about formatting HTML. Also, I've installed about every HTML formatting plugin out there with mixed results and none really solve my issue.

Also, configuring these plugins can be difficult since I'm not a programmer and some authors don't provide enough information to customize their plugins.

For now the only plugin that formats my HTML somewhat Ok is HTMLTidy, the problem is that it uses too much space per tag. See my HTML example below.

I also tried what they mentioned in this thread and it only works to some extent as far as indentation goes, but not really for 'true' markup formatting.

All I want to do is turn this markup:

<ul>
   <li>
     item here
   </li>
   <li>
     item here
   </li>
   <li>
     item here
   </li>
</ul>

Or this one:

<p>
   Content...
</p>

Into this:

<ul>
   <li>item here</li>
   <li>item here</li>
   <li>item here</li>
</ul>

And this:

 <p>Content...</p>

Having the content of every tag in a separate line from the opening/closing tags is a waste of space for me.

Any idea how to accomplish this either by modifying something in TidyHTML or manually, or any other way for that matter?

Thanks in advance.

回答1:

Note: This solution works only in ST2, because at this moment (7/31/14) HTMLTidy is not available for ST3.

I figured a temporary solution, not ideal by any means, but...

  1. Go to: Preferences -> Key Bindings - User. You will be editing the file Default (Windows).sublime-keypmap.

  2. Add these two instructions to that file (note that the instructions need to be inside the [ ] brackets):

     [
   { "keys": ["ctrl+shift+r"], "command": "reindent" , "args": {"single_line": false}},
   //Indent code -- http://stackoverflow.com/questions/8839753/formatting-html-code-using-sublime-text-2

   { "keys": ["ctrl+alt+t"], "command": "html_tidy"}
   //HTMLTidy key binding
 ]

  3. Save the file.

  4. Make sure you have HTMLTidy installed. Open HTMLTidy's Settings file HtmlTidy.sublime-settings: Preferences -> Package Settings -> HtmlTidy -> Settings - Default.

  5. Look for "indent": true, (include double quotes and comma) and change it to false.

  6. Save the file.

  7. Go back to your HTML file and select a section of the code you want to format in one line. Yes, it doesn't work if you select the entire markup o_O. It will only leave what's inside the <body> tag, and it will delete everything else (<html>, <head>, etc).

  8. Press CTRL+ALT+T to execute TidyHTML. This will shrink your markup and make the tags in one line.

  9. Finally press CTRL+SHIFT+R to execute the indentation.

Good luck.



回答2:

If your elements are uniform, a much easier solution would be to select all the <li>s you want to crush to one line with alt+f3 or, for more control, ctrl+d, then just hit ctrl+j twice to join the lines together. Done!

Failing that, use ctrl+shift+j to select all the content within a tag after multi-selecting one part of each of the tags. Hit the cursors to the right or left edge with the left or right arrow keys and you can delete from there.



回答3:

you can set shortcut key for one line by press key F12

goto menu Preferences -> Key Bindings – User

{ "keys": ["f12"], "command": "reindent"}

see detail at http://how-to-sublime-text.blogspot.com/2014/11/reformat-code.html



标签： sublimetext2
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~