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
Related
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
I was playing around with HTML DOM, and I noticed that two properties don't agree with each other with no apparent reason. Consider this simple HTML file:
<html>
<head>
<title>DOM Example</title>
</head>
<body>
<p>Hello World!</p>
<p>Isn't this exciting?</p>
<p>You're learning to use the DOM!</p>
</body>
<script type="text/javascript" src="script.js"></script>
</html>
I expected body and alt_body to be identical, but .childNodes insists giving me a text node. (Below is the content of script.js)
body = document.documentElement.childNodes[1]
alt_body = document.documentElement.lastChild;
console.log(body.nodeType) //prints 3 (Node.TEXT_NODE)
console.log(alt_body.nodeType) //prints 1 (Node.ELEMENT_NODE)
console.log(body.childNodes.length) //prints 0
console.log(alt_body.childNodes.length) //prints 8
Does anyone know why it's acting that way?
It's because childNodes returns a text line node as well
<html>
<head>
<title>DOM Example</title>
</head>
<body>
<p>Hello World!</p>
<p>Isn't this exciting?</p>
<p>You're learning to use the DOM!</p>
</body>
<script type="text/javascript" src="script.js"></script>
</html>
0 : will be <head> node
1 : will be empty text ( considered as a node )
2 : will be <body> node ( lastChild in this HTML )
Try after getting rid of all the linefeeds and spaces like this below.
<html><head><title>DOM Example</title></head><body><p>Hello World!</p><p>Isn't this exciting?</p><p>You're learning to use the DOM!</p></body><script type="text/javascript" src="script.js"></script></html>
Then the result will be what you expected.
childNodes[1] isn't the last child, because there are three children:
[0] The Head Element
[1] The Text Node containing the newline character between your </head> and <body>.
[2] The body element
If you were to remove the newline and all spaces between </head> and <body> you would find that childNodes[1] === lastChild:
<html>
<head>
<title>DOM Example</title>
</head><body>
<p>Hello World!</p>
<p>Isn't this exciting?</p>
<p>You're learning to use the DOM!</p>
</body>
<script type="text/javascript" src="script.js"></script>
</html>
I'm trying to generate an html file to a file. I'm using with-html-output-to-string, but I can't seem to figure out how to get the functionality to work. I'm not sure if I should use a file stream, with-open-file, and how to get the syntax to work. I've been messing with this for a day, but the code just doesnt run.
CL-USER> (who:with-html-output-to-string (out nil :prologue t :indent t)
(:html
(:head
(:title "home"))
(:body
(:p "Hello cl."))))
"<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Strict//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">
<html>
<head>
<title>home
</title>
</head>
<body>
<p>Hello cl.
</p>
</body>
</html>"
I am attempting to convert DOCX to DITA topics through an intermediate HTML step.
Now, with simple substitutions either in 'sed' or 'emacs' or 'vi', I can do most of the changes, but not certain types. For that I may need Perl or Python. Below is an example of what I am trying to accomplish:
From:
<h1> Head 1 </H1>
<body>
</body>
<h2>Sub Head 1 </h2>
<body>
</body>
<h3>SubSub Head 1 </h3>
<body>
</body>
<h2>Sub Head 2 </h2>
<body>
</body>
<h1>Head 2 </h1>
<body>
</body>
To:
<topic><title> Head 1 </title>
<body>
</body>
<topic><title> Sub Head 1 </title>
<body>
</body>
<topic><title> SubSub Head 1 </title>
<body>
</body>
</topic>
</topic>
<topic><title> Sub Head 2 </title>
<body>
</body>
</topic>
</topic>
<topic><title> Head 2 </title>
<body>
</body>
</topic>
The part I have trouble with is the part where I need to place the tags for nested topics (and yes, I do have nested topics; my needs are somewhat unique since I am migrating existing documents). If someone can suggest a perl snippet (or a pointer to one similar) for this (placement of tags on a per tag basis), I can build my script around it.
Thanks in advance for looking and suggestions.
That's the kind of processing I often use XML::Twig for.
The wrap_children method is designed just for this: it lets you define a regexp-like expression that will be wrapped in an element. See the example below and the docs for more:
#!/usr/bin/perl
use strict;
use warnings;
use Test::More tests => 1;
use XML::Twig;
# reads the DATA section, the input doc first, then the expected result
my( $in, $expected)= do{ local $/="\n\n"; <DATA>};
my $t=XML::Twig->new->parse( $in);
my $root= $t->root;
# that's where the wrapping occurs, form inside out
$root->wrap_children( '<h3><body>', topic => { level => 3 });
$root->wrap_children( '<h2><body><topic level="3">*', topic => { level => 2 });
$root->wrap_children( '<h1><body><topic level="2">*', topic => { level => 1 });
# now we cleanup: the levels are not used any more
foreach my $to ($t->descendants( 'topic'))
{ $to->del_att( 'level'); }
# the wrapping will have generated tons of additional id's,
# you may not need this if your elements had id's before the wrapping
foreach my $to ($t->descendants( 'topic|body|h1|h2|h3'))
{ $to->del_att( 'id'); }
# now we can deal with titles
foreach my $h ($t->descendants( 'h1|h2|h3')) { $h->set_tag( 'title'); }
# how did we do?
is( $t->sprint( pretty_print => 'indented'), $expected, 'just one test');
__DATA__
<doc>
<h1> Head 1 </h1>
<body></body>
<h2> Sub Head 1 </h2>
<body></body>
<h3> SubSub Head 1 </h3>
<body></body>
<h2> Sub Head 2 </h2>
<body></body>
<h1> Head 2 </h1>
<body></body>
</doc>
<doc>
<topic>
<title> Head 1 </title>
<body></body>
<topic>
<title> Sub Head 1 </title>
<body></body>
<topic>
<title> SubSub Head 1 </title>
<body></body>
</topic>
</topic>
<topic>
<title> Sub Head 2 </title>
<body></body>
</topic>
</topic>
<topic>
<title> Head 2 </title>
<body></body>
</topic>
</doc>
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.