Hi I'm trying to get the top of my multimarkdown file to look like:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>Test of markdown</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="../main.css" />
</head>
I know how to add the following metatags:
Title: Test of markdown
CSS: ../main.css
Quotes language: english
which gives me :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Test of markdown</title>
<link type="text/css" rel="stylesheet" href="../main.css"/>
</head>
But I'm not sure how to add the rest. Would appreciate any help. Thanks
I can't find any native markdown way to do this but you could run a little script across the generated HTML if you really feel you need to do this.
This is a simple Python 3 option that might get you started. This could be improved in many ways but wanted to keep it simple. An obvious idea would be to give it a folder and have it process every HTML file in the folder. But I hope this gives the idea.
Example code:
filepath = input('What is the full file path to the file? - ')
htmldoctype = ' '.join([
'<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"',
'"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">',
'\n'
])
htmlinfo = ('<html xmlns="http://www.w3.org/1999/xhtml">\n')
inlines = []
try:
with open(filepath, mode='r', encoding='utf-8') as infile:
for line in infile:
if line.strip() == '<!DOCTYPE html>':
inlines.append(htmldoctype)
elif line.strip() == '<html>':
inlines.append(htmlinfo)
else:
inlines.append(line)
except Exception:
print('something went wrong in get')
try:
with open(filepath, mode='w', encoding='utf-8') as outfile:
for line in inlines:
outfile.write(line)
except Exception:
print('something went wrong in write')
Input:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Test of markdown</title>
<link type="text/css" rel="stylesheet" href="../main.css"/>
</head>
<body>
test
</body>
</html>
Output:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"/>
<title>Test of markdown</title>
<link type="text/css" rel="stylesheet" href="../main.css"/>
</head>
<body>
test
</body>
</html>
Related
I would like to change the basic hmtl structure in VS code that is loaded with [! + tab] or [ctrl + space]
What I have when I press [! tab]:
<!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 would like to set it to for example :
<!DOCTYPE html>
<html lang="fr">
<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">
<link rel='stylesheet' type='text/css' media='screen' href='main.css'>
<title>Document</title>
</head>
<body>
</body>
</html>
I tried looking into the html snippets parameters but didn't find anything.
To overwrite existing emmets in VS Code:
Create a snippets.json file, add this JSON structure and save it somewhere on your hard disk.
{
"html": {
"snippets": {
"!": "{<!DOCTYPE html>}+html[lang='fr']>(head>meta:utf+meta:vp+title{${2:Document}}+link[rel='stylesheet' type='text/css' media='screen' href='main.css'])+body"
}
},
"css": {
"snippets": {}
}
}
Open the VS Code settings (Code → Preferences → Settings) and search for “Emmet Extensions Path”.
Click “Add Item”, enter the path to the folder where you’ve saved the snippets.json file you’ve created earlier, and press “OK”.
Now try ! + TAB ;)
To learn more about how custom snippets work, check this article
I cannot find a solid example of using the language tag with Next Head. Here are the two best I've seen. Which one, if either, is proper?
Note: It doesnt have to be dynamic.
Option 1
<Head>
<meta property="og:locale" content="en_US" />
...
</Head>
Option 2
<html lang='en'>
<Head>
...
</Head>
</html>
Option 3 (capital Html)
<Html lang='en'>
<Head>
...
</Head>
</Html>
You can add it to the next.config.js
module.exports = {
i18n: {
locales: ['en-US'],
defaultLocale: 'en-US',
localeDetection: false,
},
}
Windows 10, Sublime Text Editor 3, Emmet.
My html file has UTF-8 encoding. I want to insert a smile in the text (I inserted the smile by Win + . keys pressing):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
p{A smile 😜}
</body>
</html>
After I wrote p{A smile 😜} text I pressed Tab key but the string wasn't transformed to html code. Hm... I pressed Tab key again and I got the expected result.
Ok... But now I will get the problem in Emmet. I added the text (ol):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<p>A smile 😜</p>
ol>li*5
</body>
</html>
Now, if I press the Tab key then I get the invalid result:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<p>A smile 😜</p>
o<ol>
<li></li>
</ol>
</body>
</html>
Pay attention to o before <ol> tag. Also, li item is one, but I expected to get 5 li items... I have the problem for some smiles. For example, I get the problem for 😜 smile, but I haven't for ☠.
const a = '😜';
console.log(`a.length: ${a.length}`); // 2
const b = '☠';
console.log(`b.length: ${b.length}`); // 1
How can I fix it?
I am working on a simple webpage. I have a following sample json file and an HTML template
data.json
{
"NAME":"SAMPLE_NAME",
"ADDRESS":"New Brunswick Avenue"
}
index.html
<div class="name"></div>
<div class="address"></div>
So i have to display the name and address on the template reading from the json file. Is there any library that i can user for this or any other way to accomplish this?
I think you are looking for a compile-time templating or pre-compiled templating engine sort of thing.
You can build one your own with html, css and using javascript or jquery to change the text of certain elements, but this is going to take a long time if you have big pages.
However there is a library out there that does something like this and its called Handlebars.
Heres a link: http://berzniz.com/post/24743062344/handling-handlebarsjs-like-a-pro
This might give you an idea of what it does: What is the difference between handlebar.js and handlebar.runtime.js?
Here is an example using your html:
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.12/handlebars.min.js"></script>
<!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=edge">
<title>Document</title>
</head>
<body>
<script>
// Load your html / template into this variable
var template = '<div class="name">{{name}}</div><div class="address">{{address}}</div>';
var jsonData = {
"name":"John",
"address": "City Street"
}
var compiledTemplate = Handlebars.compile(template);
// The output html is generated using
var html = compiledTemplate(jsonData);
document.getElementsByTagName('body')[0].innerHTML = html;
</script>
</body>
</html>
If you would rather write html outside of the javascript variables you could also do it like this:
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.12/handlebars.min.js"></script>
<!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=edge">
<title>Document</title>
</head>
<body>
<div id="template">
<div class="name">{{name}}</div>
<div class="address">{{address}}</div>
</div>
<script>
// Load your html / template into this variable
var template = document.getElementById('template').innerHTML;
var jsonData = {
"name":"John",
"address": "City Street"
}
var compiledTemplate = Handlebars.compile(template);
// The output html is generated using
var html = compiledTemplate(jsonData);
document.getElementById('template').innerHTML = html;
</script>
</body>
</html>
By default, Thymeleaf needs all the html files to be present in scr/main/java/resources/templates. In order not to create a mess in templates folder I need to create different subloders there. The problem is that html files placed there never get resolved. Example is below.
Structure:
IndexController:
#Controller
public class IndexController {
#GetMapping(value = "/")
public String index() {
return "index";
}
}
default template:
<!DOCTYPE html>
<html lang="en"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
<meta charset="UTF-8"/>
<title>Default template</title>
</head>
<body>
<section id="site-content" layout:fragment="content"></section>
</body>
</html>
index:
<!DOCTYPE html>
<html lang="en"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorator="default">
<head>
<meta charset="UTF-8"/>
<title>Index</title>
</head>
<body>
<div layout:fragment="content">
<div>
This is index page
</div>
Page
</div>
</body>
</html>
page in the subfolder:
<!DOCTYPE html>
<html lang="en"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorator="default">
<head>
<meta charset="UTF-8">
<title>Page</title>
</head>
<body>
<div layout:fragment="content">
This is a page in the subfolder
</div>
</body>
</html>
When I open index page and click the link to the page.html, I get this:
What I did wrong?
You have no controller mapping for /subfolder/page.html, this is not how Thymeleaf and Spring work.
You can't easily reference plain HTML files, as they aren't technically stored there. You have to reference an endpoint defined within Spring which will then select the HTML file to be rendered, like so:
#Controller
public class IndexController {
#GetMapping(value = "/subfolder/page")
public String index() {
return "subfolder/page";
}
}
and create your link like this:
Page