Blogger - Take Visual Studio Code as the HTML Editor

-
1. Open Visual Studio Code, go to "File"→"Preference"→"Settings"→"Text Editor"→"Formatting" and check "Format on paste" to avoid auto-indent of pasting.

2. Go to "File"→"Preference"→"User Snippets", search and open html.json file. Create your own snippets. Take mine for example,
{ // Place your snippets for html here. Each snippet is defined under a snippet name and has a prefix, body and // description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are: // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the // same ids are connected. // Example: // "Print to console": { // "prefix": "log", // "body": [ // "console.log('$1');", // "$2" // ], // "description": "Log output to console" // } "HTML paragraph": { "prefix": [ "paragraph" ], "body": [ "<div dir=\"ltr\" style=\"line-height: 1.8;\">", "<span style=\"color: black; font-family: Arial; font-size: 14pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;\"", ">$1", "</span></div><br />", "", "$0", ], }, "HTML table": { "prefix": [ "table" ], "body": [ "<div dir=\"ltr\" style=\"line-height: 1.8;\">", "<span style=\"color: black; font-family: Arial; font-size: 14pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;\"", ">$1", "</span></div>", "<div dir=\"ltr\" style=\"line-height: 1.0; overflow: auto;\">", "<table style=\"border: none;\">", "<colgroup><col width=\"1%\"></col></colgroup>", "<tbody><tr><td style=\"background-color: lightgrey; padding: 10pt 10pt 10pt 10pt;\">", "<span style=\"color: black; font-family: Consolas; font-size: 12pt; white-space: pre;\"", ">$2", "</span></td></tr></tbody></table></div><br />", "", "$0", ], }, "HTML angle brackets": { "prefix": [ "angleBrackets" ], "body": [ "&lt;$1&gt;$0" ], }, "HTML blockquote": { "prefix": [ "blockquote" ], "body": [ "<div dir=\"ltr\" style=\"line-height: 1.8; border-left: 4px solid lightgray;\">", "<blockquote style=\"text-align: left;\"><span style=\"color: black; font-family: Arial; font-size: 14pt; font-variant-east-asian: normal; font-variant-numeric: normal; vertical-align: baseline; white-space: pre-wrap;\"", ">$1", "</span></blockquote></div><br />", "", "$0", ], }, }

3. Install the "HTML Preview" extension. It provides code preview synchronously.

4. Lastly, Open a new file, type exclamation mark, enter, and start edit between body elements.

Comments

Post a Comment

Popular posts from this blog

Manual - Modbus TCP Client

-
1. Privacy policy: **Privacy Policy** Digit Mund built the Modbus TCP Client app as an Ad Supported app. This SERVICE is provided by Digit Mund at no cost and is intended for use as is. This page is used to inform visitors regarding my policies with the collection, use, and disclosure of Personal Information if anyone decided to use my Service. If you choose to use my Service, then you agree to the collection and use of information in relation to this policy. The Personal Information that I collect is used for providing and improving the Service. I will not use or share your information with anyone except as described in this Privacy Policy. The terms used in this Privacy Policy have the same meanings as in our Terms and Conditions, which is accessible at Modbus TCP Client unless otherwise defined in this Privacy Policy. **Information Collection and Use** For a better experience, while using our Service, I may require you to provide us with certain personally identifiable infor
Read more

Manual - TCP / UDP Client

-
1. Privacy policy: **Privacy Policy** Digit Mund built the TCP/UDP Client app as an Ad Supported app. This SERVICE is provided by Digit Mund at no cost and is intended for use as is. This page is used to inform visitors regarding my policies with the collection, use, and disclosure of Personal Information if anyone decided to use my Service. If you choose to use my Service, then you agree to the collection and use of information in relation to this policy. The Personal Information that I collect is used for providing and improving the Service. I will not use or share your information with anyone except as described in this Privacy Policy. The terms used in this Privacy Policy have the same meanings as in our Terms and Conditions, which is accessible at TCP/UDP Client unless otherwise defined in this Privacy Policy. **Information Collection and Use** For a better experience, while using our Service, I may require you to provide us with certain personally identifiable information
Read more

Manual - MQTT Client

-
1. Privacy policy: **Privacy Policy** Digit Mund built the MQTT Client app as an Ad Supported app. This SERVICE is provided by Digit Mund at no cost and is intended for use as is. This page is used to inform visitors regarding my policies with the collection, use, and disclosure of Personal Information if anyone decided to use my Service. If you choose to use my Service, then you agree to the collection and use of information in relation to this policy. The Personal Information that I collect is used for providing and improving the Service. I will not use or share your information with anyone except as described in this Privacy Policy. The terms used in this Privacy Policy have the same meanings as in our Terms and Conditions, which is accessible at MQTT Client unless otherwise defined in this Privacy Policy. **Information Collection and Use** For a better experience, while using our Service, I may require you to provide us with certain personally identifiable information. The
Read more