This jade:
h1 a < b
Produces this HTML:
<h1>a < b</h1>
How can I get it to automatically escape the <? (i.e. not typing in < myself)
<h1>a < b</h1>
this h1 a < b is a shortcut for h1!= "a < b"
just use this here:
h1= "a < b"
Related
Based on the example in the html/template documentation I can't say I fully understand why it appears that less and greater than are inconsistently escaped in my experiment:
https://golang.org/pkg/html/template/#hdr-Introduction
Does this warrant a bug report? I am holding off since I am relatively new to Go.
$ go version
go version go1.16 linux/amd64
I saw similar behavior with go1.15.8.
package main
import (
htmltemplate "html/template"
"os"
texttemplate "text/template"
)
type MyVars struct {
Flavor string
}
func main() {
Vars := MyVars{
Flavor: "##### html #####",
}
htmlTmpl, _ := htmltemplate.ParseFiles("index.html")
htmlTmpl.Execute(os.Stdout, Vars)
Vars = MyVars{
Flavor: "##### text #####",
}
textTmpl, _ := texttemplate.ParseFiles("index.html")
textTmpl.Execute(os.Stdout, Vars)
}
$ cat index.html
{{ .Flavor }}
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
< span >Hello< /span >
<span>Hello</span>
{{ "<" }}span{{ ">" }}Hello{{ "<" }}/span{{ ">" }}
$ ./experiment
##### html #####
<?xml version="1.0" encoding="UTF-8" standalone="no"?> # Why is only < escaped?
< span >Hello< /span > # Why is only < escaped?
<span>Hello</span> # Why is neither < nor > escaped?
<span>Hello</span>
##### text #####
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
< span >Hello< /span >
<span>Hello</span>
<span>Hello</span>
1: {{ .Flavor }}
2: <?xml version="1.0" encoding="UTF-8" standalone="no"?>
3: < span >Hello< /span >
4: <span>Hello</span>
5: {{ "<" }}span{{ ">" }}Hello{{ "<" }}/span{{ ">" }}
The < on lines 2 and 3 are text. The HTML template package escapes < in text to prevent a document reader from misinterpreting the < as the start of a tag.
The > on lines 2 and 3 is written as is to the output. There is no security benefit to escaping the >.
The < and > on line 4 are part of a tag. Tags are not escaped.
The < and > on line 5 are the value of an expression. The HTML template package fully escapes expression results.
\Trying to get the texts A Plus and Computers from this html:
<div class="u-space-t1">
<h1 class="biz-page-title embossed-text-white shortenough">A Plus</h1>
<div class="u-inline-block">
<h1 class="biz-page-title\ embossed-text-white\ shortenough">Computers</h1>
<div class="u-inline-block">
So I tried to get the text like this:
c = soup.findAll('h1',{"class":"biz-page-title embossed-text-white shortenough"})
print(c)
However I am getting an empty list
I have tried doing this as well:
c = soup.find('div', class_='u-inline-block').h1
I am getting a 'Nonetype' object not found.
Try this:
html = """
<div class="u-space-t1">
<h1 class="biz-page-title embossed-text-white shortenough">A Plus</h1>
<div class="u-inline-block">
<h1 class="biz-page-title\ embossed-text-white\ shortenough">Computers</h1>
<div class="u-inline-block">
"""
soup = bs4(html, 'lxml')
for i in soup.find_all('h1'):
print(i.text)
Output:
A Plus
Computers
Do it like this.
texts = soup.select("div > h1, div > div > h1")
for text in texts:
print(text.text)
"A Plus" and "Computers" will come out.
I have a node.js script which i am working on.
I have multiple html files which I want to merge using handlebars into one file. This is what I want to get done.
Please I hope you do not mind the output from the editor. It kept on converting the code into html output so I had to format my output in this format.
This is my desired output the main html file.
< html >
< head >
< title>My node file</title>
< link rel=stylesheet href=bootstrap/css/bootstrap.min.css> <!-- load bootstrap css -->
< link rel=stylesheet href=bootstrap/css/font-awesome.min.css> <!-- load fontawesome -->
< /head> <br>
< body> <br>
< div class=container>
< div class=col-sm-6 col-sm-offset-3>
< h1><span class=fa fa-sign-in></span> Login</h1>
< form action=/login method=post>
< div class=form-group>
< label>Email</label>
< input type=text class=form-control name=email>
< / div>
< div class=form-group>
< label>Password</label>
< input type=password class=form-control name=password>
< /div>
< button type=submit class=btn btn-warning btn-lg>Login</button>
< /form>
< p>Need an account? <a href=/signup>Signup</a></p>
< p>Or go <a href=/>home</a>.</p>
< /div> <br>
< /div>
< /body>
< /html>
These are the different files
content.html
<!doctype html>
< html>
//include header.html
< body>
< div class=container>
< div class=col-sm-6 col-sm-offset-3>
< h1><span class=fa fa-sign-in></span> Login</h1>
//include form.html
< hr>
//include another.html
< /div>
< /div>
< /body>
< /html>
form.html
< form action=/login method=post>
< div class=form-group>
< label>Email</label>
< input type=text class=form-control name=email>
< /div>
< div class=form-group>
< label>Password</label>
< input type=password class=form-control name=password>
< /div>
< button type=submit class=btn btn-warning btn-lg>Login</button>
< /form>
header.html
< head>
< title>My node file</title>
< link rel=stylesheet href=bootstrap/css/bootstrap.min.css> <!-- load bootstrap css -->
< link rel=stylesheet href=bootstrap/css/font-awesome.min.css> <!-- load fontawesome -->
< /head>
another.html
< p>Need an account? <a href=/signup>Signup</a></p>
< p>Or go <a href=/>home</a>.</p>
in php you can do something like this
include('file1.php');
some other text which can be added to the html
include('file2.php');
I have a table in whose column I show both a image and text.Image is being displayed on upper side and text is being displayed below it.But I want to show both side by side.Moreover I want table to be fit on screen i.e I don't want to have scroll bars.
My Html code is
<% #page language = "java"
contentType = "text/html; charset=ISO-8859-1"
pageEncoding = "ISO-8859-1" %>
<% #taglib uri = "http://java.sun.com/jsp/jstl/core"
prefix = "c" %>
<% #taglib prefix = "fmt"
uri = "http://java.sun.com/jsp/jstl/fmt" %>
< !DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd" >
< html >
< head >
< meta http - equiv = "refresh"
content = "30" >
< title > Insert title here < /title>
<style>
.green {
color: green;
text-transform: capitalize;
}
.red {
color: red;
text-transform: capitalize;
}
</div >
< /style>
</head >
< body style = 'margin:0;padding:0;' >
< jsp: useBean id = "bs"
class = "beam_Status.BeamStatus_Bean" >
< /jsp:useBean>
<div id="loadData">
<CENTER><H1>BEAMLINE STATUS</H1 > < /CENTER>
<center>
<table border = "1" width="100%" height="60">
<tr>
<th><h1><b>BEAMLINES</b > < /h1></th >
< th > < h1 > < b > STATUS < /b></h1 > < /th>
</tr >
< c: forEach
var = "country"
items = "${bs.beam_CurrentStatus()}" >
< h3 > < b >
< c: choose >
< c: when test = "${country.value == 'IN OPERATION'}" >
< tr >
< td class = "green"
style = "text-transform: uppercase;" > < center > < h2 > $ {
country.key
} < /h2></center > < /td>
<td class="green" style="text-transform: uppercase; " ><img style="vertical-align:middle;" src = "red.png" height="50" width="50" / > < h2 > $ {
country.value
} < /h2></td >
< /tr>
</c: when >
< c: otherwise >
< tr >
< td class = "red"
style = "text-transform: uppercase; " > < center > < h2 > $ {
country.key
} < /h2></center > < /td>
<td class="red" style="text-transform: uppercase; " ><img style="vertical-align:middle;" src = "green.png" height="50" width="50" / > < h2 > $ {
country.value
} < /h2> </td >
< /tr>
</c: otherwise >
< /c:choose>
</b > < /h3>
</c: forEach >
< /table>
</center >
< /div>
<script>
< /html >
My output.
I want the second column text and image to be aligned side by side and table to fit the screen.
Thanks in advance.
Got it, just added
display: inline-block
<h2 style="vertical-align:middle; display: inline-block;">
I think it's simpler to break the column with image and text in 2 distinct columns: 1 for the image and 1 for the text. In css you can use: table {width:100%}
Make the following changes in the image tag:
add display:block and add float:left
In the text to show it side by side, just add float:left assuming text is inside a block element like a p tag.
For table to occupy full screen use width:100%;
How do I align add this text properly?
my code :
data[0]=hello 123
data[1]=hellowq 345
data[2]=heloowaaa 678
for (var i = 0; i < data.length; i++) {
obj += "<pre><li>" + data[i] + "</li></pre>";
}
my actual input :
hello 123
hellowq 345
heloowaaa 678
output :
hello 123
hellowq 345
heloowaaa 678
I would like to get output like this:
hello 123
hellowq 345
heloowaaa 678
You have invalid HTML, the only valid child of either a <ul> or <ol> is an <li> element; the <pre> elements should be within the <li> elements:
for (var j = 0; j < data.length; j++) {
obj += "<li><pre>" + data[i] + "</pre></li>";
}
And the CSS for the <pre> elements set to white-space: pre-wrap (or similar), this is the usual default styling of that element, but it's possible that the defaults have been overwritten or set differently in your browser.
As I claimed in the comments, you probably add the same amount of spaces to each label/value-pair. The solution is probably in the code we don't see where you would have to subtract the length of your label+value from the number of whitespaces generated.
A better way to do this would be to layout in html/css instead. A quick and dirty example.
HTML
<ul>
<li>Domdido <span class="value">$8</span></li>
<li>Domdido123 <span class="value">$8</span></li>
</ul>
CSS:
ul{list-style:none;padding-left:0;
width:50%;
}
.value{float:right;}
http://jsfiddle.net/tqs2rvrd/