I'm using VS Code + js-beautify + Beautify css/sass/scss/less, and I'm facing couple of annoying issues when I format my code (don't know how to solve them):
This is NOT how I want my background color to look.
From:
background-color: rgba(0, 0, 0, .0);
To:
background-color: rgba(0,
0,
0,
.0);
I want it to be format as one line (like "from").
The "cursor" property is in different color
When I format my html code, there are line spaces in the body and the html.
From:
<!DOCTYPE html>
<html lang="en">
<head>
<title>React App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
To:
<!DOCTYPE html>
<html lang="en">
<head>
<title>React App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
I want it to be formatted without any empty spaces (like "from").
You can change format settings in VS Code's settings.json file. By default, head, body and html tags include a newline before them. If some issues started happening only after installing an extension, then there may be conflicting settings.
While this is an old question, I was encountering the same issue and found the solution. In your VS Code settings.json, add the following to it:
"html.format.extraLiners": "",
By default nothing is there so it will default to html, body, /html. By setting it to nothing, it will give you the behavior you want.
Related
In some html editors when you create a new html file, some default codes as below created automatically:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8"/>
</head>
<body>
</body>
</html>
how can I enable this feature in VSCode editor?
Thanks.
Press shift and 1 (!) It will show two options select the first one or type html:5 and enter the option it will give you default boilerplate for html
Just give the ! sign and then press Tab.
I want to render some javascript snippet with sapui5. I am trying to use Text control but when I use that I cannt format javascript text to show up properly.Is there a way to do that?
You can use the HTML core control to embed html/javascript: https://sapui5.hana.ondemand.com/sdk/#docs/api/symbols/sap.ui.core.HTML.html
Or create a custom control
All other SAPUI5 controls are protected against XSS and forgery attacks so they won't accept any javascript code.
I also suggest that you use sap.ui.core.HTML to embed HTML in your sapui5 view. However to get your code formatted correctly (for example it shall be indented correctly) you can use the markdown-js library. See this example:
index.html:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<title>Render javascript source code in sapui5</title>
<script id="sap-ui-bootstrap"
src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-libs="sap.ui.commons"></script>
<script src="markdown.js"></script>
<script>
$.get("markdown.md", function(data) {
var mdView = new sap.ui.core.HTML({
content: markdown.toHTML(data)
});
mdView.placeAt("uiArea");
}, "html");
</script>
</head>
<body class="sapUiBody">
<div id="uiArea"></div>
</body>
</html>
markdown.md:
# Markdown
To produce a code block in Markdown, simply indent every line of the block by at least 4 spaces or 1 tab.
for (i=0; i < 10; i++) {
if (true) {
console.log("Hello World!");
}
}
If you want to test this example in you Chrome browser, do the following:
Download markdown-browser-*.tgz from markdown-js and place the contained markdown.js together with the above index.html and markdown.md in some folder.
Start Chrome with parameter --allow-file-access-from-files and drop the index.html on the Chrome browser window.
Wait-webdriver, chrome-driver
I have the following html code:
<iframe frameborder="0" allowtransparency="true" tabindex="0" src="" title="Rich text editor, ctl00_ContentMain_EditSegment1_txtDesc" aria-describedby="cke_27" style="width:100%;height:100%">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html class="CSS1Compat" lang="en" dir="ltr">
<head>
<title data-cke-title="Rich text editor, ctl00_ContentMain_EditSegment1_txtDesc">Rich text editor, ctl00_ContentMain_EditSegment1_txtDesc</title>
<link href="http:somefile.css" rel="stylesheet" type="text/css">
<style data-cke-temp="1" type="text/css">
</head>
<body class="cke_show_borders" contenteditable="true" spellcheck="false">
<br type="_moz">
</body>
</html>
</iframe>
I used the following code to set data to the body of the iframe :
#browser.frame(:title => 'Rich text editor, ctl00_ContentMain_EditSegment1_txtDesc').send_keys "description"
Yesterday I updated my chromedriver with new one: https://code.google.com/p/chromedriver/downloads/list
and this line doesn't work for me anymore, but it still works using old chromedriver
Any ideas how can I make it work with new chromedriver?
Thanks,
Anna
Yes, got the same issue. Switched back to old version and got it to work again.
Got all the frameSwitch code in a C# try/catch and no error is given, just an empty textfield.
( Dojo richtext )
The issue fixed in new chromedriver v.2.2:
https://code.google.com/p/chromedriver/downloads/list
I'm having problems with my HTML and jQuery Code. I was wondering if someone could tell me what's wrong with it. Here's the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Main Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Scripts -->
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script>
<!-- Stylesheets -->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css" />
<!-- Color Scheme -->
<!-- Beige: #eee8cd; Green: #008b8b; Blue: #203471; -->
</head>
<body>
<div id="MainPage" style="background:#008b8b;color:#203471" data-role="page">
<div style="background:#008b8b;color:#203471" data-role="content">
<p style="background:#008b8b;color:#203471"><img alt="" src="Images/Header.png" style="width:100%" /></p>
<p style="background:#008b8b;color:#eee8cd">The content for the main page is here</p>
<a style="background:#eee8cd;color:#203471" href="AboutUs.htm" data-role="button">About Us</a>
<a style="background:#eee8cd;color:#203471" href="ContactUs.htm" data-role="button">Contact Us</a>
</div>
<div style="background:#203471;color:#eee8cd" data-role="footer">
<h4>Main Page Footer</h4>
</div>
</div>
</body>
</html>
There are two problems that I am having problems figuring out:
1) When I put this code on my web server and navigate to it via my iPhone it is fine when the phone is held in the vertical position. When the phone is moved into the horizontal position though, the buttons seem to be displayed over the text and are not workable. Any ideas on how to resolve this?
2) I tried to create a custom stylesheet.css and link to it via the class attribute of the various tags. This would not work so I had to put the inline code (for example:)
<div style="background:#203471;color:#eee8cd"
Can someone show me how to create a stylesheet.css with these attributes and "tag" them in the HTML so that this works?
Thanks So Much.
Well, you've got a link to jQuery where your link to your CSS should go. Check out www.codecademy.com !
I've separated inline css to its own and seems to render fine.
Play with this fiddle here http://jsfiddle.net/kVqWJ/
You can include css files in your html file many ways:
1)
<style type="text/css">
//your style here
</style>
2)
<link rel="stylesheet" type="text/css" href="css url here">
A quick googling will help. The Mozilla developer network is a great place to start.
i found out the right answer (not to adjust text size on rotation !)
Preserve HTML font-size when iPhone orientation changes from portrait to landscape
but being very naive to css how to use it inline ?
i used as follows, but it did not work
<html>
<head>
</head>
<body style ="-webkit-text-size-adjust: none;">
<font face="Arial" size="9";>< a href="mailto:subject= mysub&attachment=myatt.doc"> mail this< /a>< br/>< b>< i>Header< /i>< /b>< br/></ font>
</body>
</html>
The example you point to is a style on the html tag, not the body tag as you have done. I suggest you try:
<html style="-webkit-text-size-adjust:none;">
and see how that works. Or you can just put the style into your head section like so:
<head>
<style type="text/css">
html {
-webkit-text-size-adjust: none; /* Prevent font scaling in landscape */
}
</style>
</head>
Interesting trick, I haven't actually ever done this myself.