Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I am saving an HTML file:
<!DOCTYPE html>
<html>
<head>
<title>'Previous Test Run Breakdown'</title>
</head>
<body>
<h1> Breakdown of results by structure</h1>
#{my_str}
</body>
</html>
my_str fills in the contents of the HTML page. Inside of my_str are list items that I want to indent. To do this I tried adding a CSS tag to the bottom to indent all li tags like:
<!DOCTYPE html>
<html>
<head>
<title>'Previous Test Run Breakdown'</title>
</head>
<body>
<h1> Breakdown of results by structure</h1>
#{my_str}
</body>
</html>
li {
padding-left: 20px;
}
Unfortunately, the output is displayed on the page instead of adding to the bottom as a padding for li items:
li {
padding-left: 20px;
}
Just add a <style> tag:
File.open("features/output/all_test_breakdown.html", "w") { |file| file.write(
" <!DOCTYPE html>
<html>
<head>
<title>'Previous Test Run Breakdown'</title>
<style>
li {
padding-left: 20px;
}</style>
</head>
<body>
<h1> Breakdown of results by structure</h1>
#{my_str}
</body>
</html>
" )}
Ugh. Here's how to write this more idiomatically. Starting with this rewrite:
my_str = 'foo'
File.open("my_output.html", "w") do |file|
file.write(<<EOT)
<!DOCTYPE html>
<html>
<head>
<title>'Previous Test Run Breakdown'</title>
</head>
<body>
<h1> Breakdown of results by structure</h1>
#{my_str}
</body>
</html>
EOT
end
I'd refine it further using:
my_str = 'foo'
File.write("my_output.html", <<EOT)
<!DOCTYPE html>
<html>
<head>
<title>'Previous Test Run Breakdown'</title>
</head>
<body>
<h1> Breakdown of results by structure</h1>
#{my_str}
</body>
</html>
EOT
If sticking a "here-to" in the write method bugs you, you could do:
my_str = 'foo'
html = <<EOT
<!DOCTYPE html>
<html>
<head>
<title>'Previous Test Run Breakdown'</title>
</head>
<body>
<h1> Breakdown of results by structure</h1>
#{my_str}
</body>
</html>
EOT
File.write("my_output.html", html)
Or:
my_str = 'foo'
html = "
<!DOCTYPE html>
<html>
<head>
<title>'Previous Test Run Breakdown'</title>
</head>
<body>
<h1> Breakdown of results by structure</h1>
#{my_str}
</body>
</html>
"
File.write("my_output.html", html)
In any case:
File.new("features/output/my_output.html", "w")
File.open("features/output/my_output.html", "w") { |file| file.write(
...
is code smell. You don't need to use new to create a file stub then open it followed by a ios.write. Simply IO.write it.
If you're just learning Ruby, the difference between the two will seem hard to decipher, but the first is a writing to a file handle, AKA "ios" AKA "IO-stream". The second is a class method of "IO", AKA "IO.write", which handles the intermediate steps of opening the file, writing the content and closing it automatically.
Related
From the Dominate github:
The document class also provides helpers to allow you to directly add nodes to the body tag.
d = document()
d += h1('Hello, World!')
d += p('This is a paragraph.')
print(d)
<!DOCTYPE html>
<html>
<head>
<title>Dominate</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is a paragraph.</p>
</body>
</html>
How do I add a paragraph before the existing paragraph?
I tried:
d = p("Offer Ends Soon") + d
Got this error
Error: TypeError
unsupported operand type(s) for +: 'p' and 'document'
I tried:
d += p("Offer Ends Soon")
But this puts the new paragraph at the bottom, not the top
<!DOCTYPE html>
<html>
<head>
<title>Dominate</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is a paragraph.</p>
<p>Offer Ends Soon</p>
</body>
</html>
This is not possible. You can't prepend tags using document().
From here:
Dominate is NOT an HTML parser. It is strictly for creating new documents, not parsing existing html files
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 am looking to create a website that compiles the HTML code that you write it in a text editor.
Here is my code:
<!DOCTYPE html>
<html>
<head><title>HTML editor</title></head>
<body>
<textarea id="textarea">
</textarea>
<iframe id="frame" srcdoc="This is where the code is interpreted. ">
</iframe>
<button onclick="run();"></button>
<script>
function run() {
var x = document.getElementById("textarea").value;
var y = document.getElementById("frame");
y.srcdoc = x;
}
</script>
</body>
</html>
Write now, I have successfully created something that compiles html code. But I want to do the syntax highliting. How do I highlight the text?
Just add the required CSS and JS for Prism.js.
<!DOCTYPE html>
<html>
<head>
...
<link href="https://myCDN.com/prism#v1.x/themes/prism.css" rel="stylesheet" />
</head>
<body>
...
<script src="https://myCDN.com/prism#v1.x/components/prism-core.min.js"></script>
<script src="https://myCDN.com/prism#v1.x/plugins/autoloader/prism-autoloader.min.js"></script>
</body>
</html>
Then add below HTML element
<pre><code class="language-css">p { color: red }</code></pre>
whatever code you write in this element will have syntax highlighting. class="language-css" determines the language for hightlighting, you can change as per your requirement. You can find all supported languages here.
Note: this is a basic example you can start from here and find more info at prism.js usage
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 have following code, and let you know that i am new to angularjs
<!DOCTYPE html>
<html data-ng-app="">
<head>
<!-- <script src="scripts/angular.js"></script>-->
<title>Angular js</title>
</head>
<body data-ng-init="names=['Ran','Run','Run']">
<br />
<ul>
<li data-ng-repeat="personName in names">{{personName}}</li>
</ul>
<script src="scripts/angular.min.js"></script>
</body>
</html>
There is no value shown from the names in li .....
any Help or suggestion to solve the issue
If you open console of your browser, you can see error:
Duplicates in a repeater are not allowed.
Use 'track by' expression to specify unique keys. Repeater: personName in ['Ran','Run','Run'], Duplicate key: string:Run
You have two same items in array (Run).
Delete last "Run" from array, and it will work fine.
Please, see:
Plunker
Please remove one 'Run' from your data-ng-init
And it will work fine..
<!DOCTYPE html>
<html data-ng-app="">
<head>
<!-- <script src="scripts/angular.js"></script>-->
<title>Angular js</title>
</head>
<body data-ng-init="names=['Ran','Run']">
<br />
<ul>
<li data-ng-repeat="personName in names">{{personName}}</li>
</ul>
<script src="JS/angular-1.2.10.min.js"></script>
</body>
</html>