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?
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,
},
}
In my entry.html I have 2 hyperlinks pointing to the same index.html file. Now, in index.html I need to find which link the user clicked to navigate to index html and do some operation based on the link.
entry.html
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
Link A
Link B
</body>
</html>
index.html
<!DOCTYPE html>
<html>
<head>
<title>Index HTML</title>
</head>
<body>
<p id="demo">This is it.</p>
<script>
// How to find the link clicked by user
</script>
</body>
</html>
You can make use of query params in the links and call location.search on the redirected page to detect which link was clicked.
Refer to the code modification to your original code-
entry.html:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
Link A
Link B
</body>
</html>
index.html:
<!DOCTYPE html>
<html>
<head>
<title>Index HTML</title>
</head>
<body>
<p id="demo"></p>
<script>
let linkName=location.search;
document.getElementById('demo').innerHTML=linkName.split('=')[1].toUpperCase()+' was Clicked !!!';
</script>
</body>
</html>
Entry:
Link A
Link B
Index:
console.log(location.hash)
or
Entry:
Link A
Link B
Index:
console.log(location.search)
or clearer
const url = new URL(location.href)
console.log(url.searchParams.get("link"))
I created an iframe into which I can post formatted text (from a Word document for example) and receive it as html. Is it possible to also recieve the unformatted version (without the html tags), such as created when copying formatted text into a textarea?
My code for logging the html of formatted text:
<!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>
<script>
window.addEventListener("load", function () {
var editor = theWYSIWYG.document;
editor.designMode = 'on';
action.addEventListener('click', function() {
var formattedHTML = editor.body.innerHTML
console.log(formattedHTML);
}, false)
}, false)
</script>
</head>
<body>
<div id="textEditor">
<button id="action" title="Bold"><b>Click me</b></button>
<div id="richTextArea"></div>
<iframe id="theWYSIWYG" name="theWYSIWYG" frameborder="0"></iframe>
</div>
</body>
</html>
Technically I could ask the user to also paste the formatted text into a seperate textarea box, but I would prefer to do it in a single time.
Thanks in advance
Try this var text = editor.body.innerText || editor.body.textContent;
Taken from this answer https://stackoverflow.com/a/6743966/2668119
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>