I am using atom to write html and atom beautify to format the code. It works quite good but there is one problem that makes my code a little bit messy. Here is the code the way i want it to be:
<section id="hero">
<div class="container">
<div class="row">
<div class="col-sm-8">
<p>Hello world!</p>
</div><!--/col-->
</div><!--/row-->
</div><!--/container-->
</section><!--/hero-->
And here is the code they way atom beautify makes it:
<section id="hero">
<div class="container">
<div class="row">
<div class="col-sm-8">
<p>Hello world!</p>
</div>
<!--/col-->
</div>
<!--/row-->
</div>
<!--/container-->
</section>
<!--/hero-->
As you can see, it puts the html comment in a new line and then i have unnecessary lines in my code and also its not so easy to see the closing tag instantly. Is there any way to configure the beautifier?
I don't see a solution. The atom-beautify package allows you to configure it in a variety of ways. One of those is adding tags to be excluded from formatting. However, when I test it by adding "!--/col--" to the array, what I get is the whole back end of the snippet being unformatted.
<section id="hero">
<div class="container">
<div class="row">
<div class="col-sm-8">
<p>Hello world!</p>
</div>
<!--/col-->
</div><!--/row-->
</div><!--/container-->
</section><!--/hero-->
Related
I'm changing a database using phpmyadmin with several html pages inside it and I would like to remove, from all these pages, all the <div> and other tags that contain a certain class or id.
Example:
Case 1
<div class="undesirable">
<div class="container">
<div class="row">
<div class="col1"></div>
</div>
</div>
</div>
Case 2
<div class="undesirable">
<div class="container">
<div class="row">
<div class="col1"></div>
<div class="col2"></div>
</div>
</div>
</div>
i would like to remove all <div> that contain the class="undesirable". In some cases, there is still the possibility of appearing as class="pre_undesirable", or something similar.
Initially I thought of using regex, but as there are variations in htmls, code breaks are occurring, as there is no way to know when the <\div> will end.
Possibly the answer would be HTML parser, but I can't understand how to use it. Any indication of where to start?
Since you are dealing with html, you probably should use an html parser and search for the removal target using xpath. To demonstrate, I'll change your html a bit:
$original=
'<html><body>
<div class="undesirable">
<div class="container">
<div class="row">
<div class="col1"></div>
</div>
</div>
</div>
<div class="keepme">
<div class="container">
<div class="row">
<div class="col1"></div>
<div class="col2"></div>
</div>
</div>
</div>
<div class="pre_undesirable">
<div class="container">
<div class="row">
<div class="col1"></div>
<div class="col2"></div>
</div>
</div>
</div>
<div class="keepme">
<div class="container">
<div class="row">
<div class="col1"></div>
<div class="col2"></div>
</div>
</div>
</div>
</body>
</html>
';
$HTMLDoc = new DOMDocument();
$HTMLDoc->loadHTML($original);
$xpath = new DOMXPath($HTMLDoc);
$targets = $xpath->query('//div[contains(#class,"undesirable")]');
foreach($targets as $target){
$target->parentNode->removeChild($target);
}
echo $HTMLDoc->saveHTML();
The output should include only the two "keep me" <div>s.
We can make use D3JS to remove or append any the HTML elements by class name or id.
We can make use of Select() and Selectall() for the selection of the particular elements in the HTML. Incase if we want to append any div tag use append('div') to insert the div for the data.
<script>
function remove()
{
d3.select(.undesirable)
.selectAll("li")
.exit()
.remove()
}
</script>
I tried to format my HTML Selection of HTML Elements in Compact View I tried too many Visual Studio Extension but none of them working like Ctrl + J and Prettify so on
Here is the example of my code look likes
<div class="example">
<div class="section">
<div class="widget">
<div class="title">
<h3 class="title">I am a developer</h3>
</div>
</div>
</div>
</div>
I need Like this Below
<div class="example"><div class="section">
<div class="widget">
<div class="title"><h3 class="title">I am a developer</h3></div>
</div></div></div>
Like above this format there is too much code I need to format with help of any extension in VS code if possible Suggest me
Any Help is Highly Appreciated
it is always good to format your code well using indentation. This helps one identify parent and child elements especially when an element has more than to child elements.
e.g.
<div class="example">
<div class="section">
<div class="widget">
<div class="title">
<h3 class="title">I am a developer</h3>
</div>
</div>
</div>
</div>
I started to use BEM methodology and i have a question according to this.
Example:
<div class="container">
<div class="container__block-1">
<h1 class="container-title">block1</h1>
</div>
<div class="container__block-2">
<h1 class="container__title container-title">block2</h1>
</div>
<div class="container__block-3">
<h1 class="container__title container-title">block3</h1>
</div>
</div>
How you can see i use: container__title element in block 2 and in block3. I need this to add different margin and padding for h1.
Question: Can i use the same element in container__block-2 and container__block-3 according to BEM methodology?
It is okay to use the same element for another block as long as you want to have the same properties of the above blocks.
However, incase you need a variation, that's when the modifier comes into role.
whenever you need to make a change in only a particular element from a group of elements, you use a modifier there. It is denoted as block__element--modifier.
<div class="container">
<div class="container__block-1">
<h1 class="container-title">block1</h1>
</div>
<div class="container__block-2">
<h1 class="container__title container__title--modifier1 ">block2</h1>
</div>
<div class="container__block-3">
<h1 class="container__title container__title--modifier2">block3</h1>
</div>
</div>
For different variants of same class, u can use --
<div class="container">
<div class="container__block-1">
<h1 class="container-title">block1</h1>
</div>
<div class="container__block-2">
<h1 class="container__title container__title--1">block2</h1>
</div>
<div class="container__block-3">
<h1 class="container__title container__title--2">block3</h1>
</div>
</div>
Hello I have been working on making a simple website.I had added a link to another page but everytime I use the link the page is blank and this error is emitted in the url about:blank#blocked.
I have used chrome and opera to test this.
Index
<body>
<div class="grid-container">
<div class="header">
<div id="headerText">
<h1>MyPortfolio</h1>
<h2>D</h2>
</div>
</div>
<div class="nav">
<div>
Skills
<a>Qualifiactions</a>
</div>
</div>
<div class="image">
</div>
<div class="aboutMe">
</div>
<div class="footer">
</div>
</div>
</div>
Other Page(skills.html)
<body >
<div class="grid-container">
<div class="header">
<div id="headerText">
<h1>Skills</h1>
<h2>D</h2>
</div>
</div>
<div class="nav">
<div>
OrderCoffe
<a>Qualifiactions</a>
</div>
</div>
<div class="image">
</div>
<div class="aboutMe">
</div>
<div class="footer">
</div>
</div>
</div>
I had my testing-new-things FTP open so I directly pasted your scripts to create two pages: index.html and skills.html and they worked as written on Chrome web browser.
About Blank is a web page built into your browser when the page has nothing to display. Perhaps check you are actually uploading your files to the correct directory- try testing them from your desktop as two .html files located in the same folder and dragging them to a new tab to display. If that doesn't work, try updating your html script with the correct syntax for creating a new document. Here is an example- remove the script tags which are used for javascript.
https://www.sitepoint.com/a-basic-html5-template/
And try basic "hello world" test documents to make sure everything is working before trying your script again.
I'm trying to abstract a common scenario in generated markup where I need a couple of tags to "wrap" an arbitrary content. So instead of writing this
<div class="container">
<p class="someClass">Some header</p>
<div id="foo">
<!-- The real content that changes -->
</div>
</div>
I would be able to write something "like"
#????
<!-- The real content that changes
#end
Where obviously I don't know what the #???? would be.
As far as I know it is not possible to do this with macros, short of defining a macro for the start of the block and a macro for the end of the block.
#macro(startContained)
<div class="container">
<p class="someClass">Some header</p>
<div id="foo">
#end
#macro(endContained)
</div>
</div>
#end
#startContained
<!-- The real content -->
#endContained
Any better way to do this ?
Use the ## macro call syntax, along with the $!bodyContent variable:
#macro(wrapper)
<div class="container">
<p class="someClass">Some header</p>
<div id="foo">
$!bodyContent##
</div>
</div>
#end
##wrapper()
The real content that changes.
#end
##wrapper()
Other different content.
#end
Renders as:
<div class="container">
<p class="someClass">Some header</p>
<div id="foo">
The real content that changes.
</div>
</div>
<div class="container">
<p class="someClass">Some header</p>
<div id="foo">
Other different content.
</div>
</div>
(The ## in the macro body removes trailing whitespace; for HTML it may not matter.)