PhpStorm HTML5 snippet - phpstorm

This is actually not a question. I just need the default snippet from PhpStorm when you create a new empty .php file and just write
! + Tab
It will spit out the HTML5 basic template. Something like:
<!DOCTYPE html>
<html>
<head>
.....
So the answer to this "question" would be simply that code.
If someone who has a PhpStorm could just paste that code here it would be nice.

I finally got it from my friend:
This is the result of the snippet:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
</body>
</html>
And this is the example for creating it in Sublime Text 3:
<snippet>
<content>
<![CDATA[
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>$1</title>
</head>
<body>
$2
</body>
</html>
]]></content>
<tabTrigger>!</tabTrigger>
</snippet>
Just copy that code under Tools/Developer/New Snippet

Related

how can i set a new boiler plate for html in VScode?

whenever I create a new document and use the boiler plate shortcut I end up having to change some lines of it, so my question is:
Is it possible to create a new boiler plate with just the information I want?
At least that way when I use the shortcut I won't need to change the boiler plate anymore.
What the boiler plate show:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
What i want:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>

The Emmet in VSCode does not give the full code in the boilerplate

I am new to VSCode. I tried using the Emmet to get a HTML5 boilerplate. When I type ! for Emmet, it does not give the full boilerplate. I got this boilerplate:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body></body>
</html>
but I expected this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<title>Document</title>
</head>
<body></body>
</html>
The <meta https-equiv /> line is missing.
I am on Windows 7.
Don't use any other extensions for HTML and CSS auto complete.
If you have already installed please remove it.
I had the same problem and all I do is update the newest VScode version and it fixed. Now the code looks like this.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>

Utility to include css and js

I have a repository of some web files I'm building. There are a few stylesheets that I maintain separately so they're included with <link> tags. To deploy the HTML I need to replace the <link> tags with <style> tags containing the content of the file. Sort of like using #include <style.css>
Is there a good Linux utility that I can use in a Makefile? Do any of the HTML preprocessors do this sort of thing? (This is different from CSS inlining.)
To be more specific:
I'm writing a custom brew sheet for BeerSmith - which is just an HTML page.
I'm using a couple of stylesheets for a grid layout, print layout, cleanup some unwanted auto-generated HTML, etc.
I would rather maintain each sheet separately instead of stuffing it all into one page.
BeerSmith does not include the separate CSS when exporting recipes, so I need to build in in to the final brew sheet.
I have a deploy script to copy the sheets into my .beersmith3 directory which I'd like to use to assemble the sheet.
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="Dean's Brewsheet (version 2019-12-08)">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Dean's Brewsheet (version 2019-12-08)</title>
<link rel="stylesheet" href="base.css" />
<link rel="stylesheet" href="grid.css" />
<link rel="stylesheet" href="beersmith-cleanup.css" />
etc ....
this is very specific to your case
sed -e 's/<link\(.*\)>/<style\1>/' -e 's/<\/link\(.*\)>/<\/style\1>/' <filename>
here is sample output
Note I have added two line to handle <link> and </link> cases
cat x
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="Dean's Brewsheet (version 2019-12-08)">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Dean's Brewsheet (version 2019-12-08)</title>
<link rel="stylesheet" href="base.css" />
<link rel="stylesheet" href="grid.css" />
<link rel="stylesheet" href="beersmith-cleanup.css" />
<link>
</link>
output is
sed -e 's/<link\(.*\)>/<style\1>/' -e 's/<\/link\(.*\)>/<\/style\1>/' x
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="Dean's Brewsheet (version 2019-12-08)">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Dean's Brewsheet (version 2019-12-08)</title>
<style rel="stylesheet" href="base.css" />
<style rel="stylesheet" href="grid.css" />
<style rel="stylesheet" href="beersmith-cleanup.css" />
<style>
</style>
I should have known there was a perl utility.... The Template Toolkit solves this problem handily.
HTML
<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="Dean's Brewsheet (version 2019-12-08)">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Dean's Brewsheet (version 2019-12-08)</title>
<style>
[% INCLUDE base.css %]
[% INCLUDE grid.css %]
[% INCLUDE beersmith_cleanup.css %]
</style>
<link rel="stylesheet" href="grid.css" />
<link rel="stylesheet" href="beersmith_cleanup.css" />
</head>
Command line
0 fatty:0.0 .beersmith3/Reports % tpage test.html > llama.html
Output
<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="Dean's Brewsheet (version 2019-12-08)">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Dean's Brewsheet (version 2019-12-08)</title>
<style>
#media screen {
html {
font-size: 1em;
}
}
....

imported svg as img is not working

Stumbled upon the following svg:
https://codepen.io/iliran11/pen/eRPxwG
While im copying the content of the pen into a file liran.svg there are the 2 following scenarios:
opening directly liran.svg with latest chrome - it works perfectly
Importing liran.svg to index.html (code below) - i can see nothing.
Maybe any exaplnation?
index.html
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<img src="./liran.svg">
</body>
</html>
You did not import properly if it is the same folder with the index.html file use
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<img src="liran.svg">
</body>
</html>
If it is the parent folder of the folder containing index.html use
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<img src="../liran.svg">
</body>
</html>
Take a look a this link to learn more on referencing files in html and css How to properly reference local resources in html

Responsiveness for mobile not working

It was once not responsive so had to reconfigure to do figure it.
What could be the issue?
<!DOCTYPE html>
<html lang="en" class="testTheme">
<head>
<meta charset="utf-8">
<meta name="mobile-web-app-capable" content="yes">
<link rel="icon" href="img\logo.ico">
<title>Testing Website</title>
<meta name="description" content="Test">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="app"></div>
</body>
</html>
Based on the above comments, your issue is how you're redirecting your custom domain to your heroku deploy. See heroku's docs for a setup that will work for you!