Say I have a line of html code,
<div><p><span>foo</span></p></div>
I want to convert it to something like
<div>
<p>
<span>foo</span>
</p>
</div>
Is there any plugins or native solution to do this?
Use the tidy program (or its HTML5 sibling).
That's what it has been designed for and that's what regular expressions are not designed for.
if you work on linux box, usually xmllint was already installed. try this command:
:%!xmllint --format -
this will change the text to what you wanted. but there is <?xml version="1.0"?> at the beginning. don't know if it is ok for you.
if you want to remove, after executing the command, the cursor will be at line, type dd to remove. or you can write it in a mapping.
:%s/></>\r</gEnterggShift-vShift-g=Enter
(you will nee to :set ft=html if you haven't already)
When I do the above, I get
<div>
<p>
<span>foo</span>
</p>
</div>
Unfortunately VIM does really poorly with most front-end related indenting (html, javascript). It's a common complaint, and will probably never have a good solution despite all of vim's customizable power.
Related
hi have thousands of these regex links in html for images
<img src="image.png" alt="" style="zoom:55%;" />
I want to convert them to a quatro (.qmd) markdown links which will look like this
{.r-stretch}
I have seen you can use a select in " but am unclear on how to only choose the image.png link but not anything in the documents in quotes. Also unclear is how to do the find and replace part (sed, VS code?)
Try searching
<img\s+(?=[^>]*\bsrc="([^>]*?)")(?=[^>]*\balt="([^>]*?)")?[^>]*\/>
and replacing it with
{.r-stretch}
You may check the test cases here
This will also put anything in alt inside of the square brakets if there's any. If you don't want this behavior, you may just try <img\s+(?=[^>]*\bsrc="([^>]*?)")[^>]*\/> with subsitution of {.r-stretch}.
I need to administer dozens of sites on pure html. Sometimes I need to change on several sites a pieces of code with many spaces, tabs and special characters, like this:
<div class="one">
<div class="two second bla-bla">
<p>bla bla bla</p>
</div>
</div>
<p>some text</p>
<div class="someclass">Text<div>
<script>some code</script>
with this:
<div class="bla">
<p>text</p>
<script>some code</script>
</div>
What is the easiest and fastest way to make these changes? In thousands of files, using regular expressions and with the most user-friendly interface.
I used to do this: download all the html files and use "Search and Replace" with regular expressions in Sublime Text.
Then I tried sed. The problem was that shielding all the spaces and tabs was difficult. I regularly make mistakes due to the difference in whitespace. It is also difficult to use regular expressions.
Is there a simpler solution?
I am writing documentation that has steps for Windows, Mac, Linux.
I want to make it look like this HTML5 tabbed HTML5 example
there is support for HTML in gitlab markdown
There is a reference to a sanitation class that validates the inline HTML in gitlab marrkdown
My question is:
Recommendations to achieve the tabbed documentation. Is there a workaround for displaying CSS correctly in markdown?
how to make this work?
Simply insert the relevant HTML/CSS/JS into your Markdown document.
As Markdown's Syntax Rules state (emphasis in original):
Markdown's syntax is intended for one purpose: to be used as a format
for writing for the web.
Markdown is not a replacement for HTML, or even close to it. Its
syntax is very small, corresponding only to a very small subset of
HTML tags. The idea is not to create a syntax that makes it easier
to insert HTML tags. In my opinion, HTML tags are already easy to
insert. The idea for Markdown is to make it easy to read, write, and
edit prose. HTML is a publishing format; Markdown is a writing
format. Thus, Markdown's formatting syntax only addresses issues that
can be conveyed in plain text.
For any markup that is not covered by Markdown's syntax, you simply
use HTML itself. There's no need to preface it or delimit it to
indicate that you're switching from Markdown to HTML; you just use
the tags.
The only restrictions are that block-level HTML elements -- e.g. <div>,
<table>, <pre>, <p>, etc. -- must be separated from surrounding
content by blank lines, and the start and end tags of the block should
not be indented with tabs or spaces. Markdown is smart enough not
to add extra (unwanted) <p> tags around HTML block-level tags.
However, there is one down side to this:
Note that Markdown formatting syntax is not processed within block-level
HTML tags. E.g., you can't use Markdown-style *emphasis* inside an
HTML block.
Finally, there is the concern that you appear to looking to have this document hosted on a third party site (perhaps in a readme on Gitlab). Most third party sites who process and host Markdown documents (including Gitlab) run the output through an HTML sanitizer for security reasons (to avoid XSS attaches, etc). Therefore, you are likely to find that various required hooks in your HTML will be stripped out and it won't work. Of course, this won't be a problem on your own site where you have total control.
The solution was tried in readme.rd from the text processor used by Microsoft VsCode and commited to gitlab. In the attached picture there is the rendering. It was not as expected. Perhaps the functionality to have tabs will be available soon.
An alternative is "collapsible sections" in GitLab Flavored Markdown. Link to documentation: link
Following is code
<p>
Some Content
Some Content
My Cursor is here
Some Content
Some Content
</p>
How do I directly Jump to beginning of Tag <p> or </p>
% command needs your cursor to be on tag, I tried other based on 10G. I cant expect number to visible all time.
I think there might be some smarter way to do this.
Using key sequence vatoESC will do it.
Check out the answer here: https://stackoverflow.com/a/10881471/5039312
If you’re open to using a plugin, I use this: https://github.com/tmhedberg/matchit
Can't seem to find the exact problem elsewhere...
Basically in my html file at the top I have:
<%inherit file="base.html"/>
This proceeds to screw up all the highlighting in the file and also confuses the commenting shortcut.
This:
Changes into this:
Found the issue. Wasn't aware that this was using Mako as the templating system rather than a more well known one. This package allows you to set the syntax at HTML(Mako)
https://github.com/OmeGak/sublime-text-user-settings
The problem is <%blabla> and </%blabla> are not considered closed.
I'm using a workaround like this: line 4 will close line 1
1 <%block name="content">
2 <%
3 #
4 %>
5 <div>
6 Syntax highlight as before. Emmet works too.
7 </div>
8 </%block>