I can't seem to get google prettify to work with basic XML: anyone got this to work, or can see what I am doing wrong: here is my code:
<html>
<head>
<meta charset="utf-8" />
<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js?autoload=true&skin=sunburst&lang=xml"></script>
</head>
<body>
<h1>XML Output</h1>
<pre class="prettyprint" id="quine" style="border:4px solid #88c">
<Rest_appt_pull licenseKey="123" passWord="456" start="30-oct-2014 00:00:00" finish="31-oct-2014 23:59:59" p_method="event">
<timings>
<entry label="Read"
time=".03"
segment=".03" />
<entry label="Processing XML"
time=".04"
segment=".01" />
</timings>
</Rest_appt_pull>
</pre>
</body>
</html>
Any help would be gratefully appreciated
The root cause is html tag symbol.
Change < to <
Change > to >
You need to html encode your xml code example first. You can use one of available online tools to do that. Then just wrap it in pre/code
<pre class="prettyprint lang-xml"> ... your html encoded xml code ... </pre>
and attach js code on the site.
Related
I'm using jest-image-snapshot with react-testing-library so that I can run some visual regression tests. The issue I'm having is that I need to define <meta charSet="UTF-8" /> (otherwise my image-snapshots don't render correctly), however react-testing-library strips out all <html>, <head> and <body> tags.
If I wrap my component like so:
<html>
<head>
<meta charSet="utf-8" />
</head>
<body>
<ComponentToTest />
</body>
</html>
Then it ends up rendering as:
<DocumentFragment>
<meta charset="UTF-8" />
<ComponentToTest />
</DocumentFragment>
Which of course doesn't set the encoding to UTF-8 as it's not within <head>.
The result of this is that any components that include a unicode character will render with a weird character instead.
For example, using (zero width space) will render as â€<. This results in my image-snapshots looking like this: https://i.imgur.com/fSK5gJ0.png
Is there any workaround here to define the character encoding?
EDIT: It seems I can change the container element (https://testing-library.com/docs/react-testing-library/api#container), but I can't define the container as { container: document.documentElement } as apparently it needs an .appendChild() to work. Is it possible to define the container element as the <html> itself? That would solve my issue if it's possible.
I have a very simple JavaScript function that uses try/catch, though when the meta tag <meta charset="utf-8" /> is defined on the page, it doesn't work:
<!doctype html>
<meta charset="utf-8" />
<script type="text/javascript">
function demo(){
try{
undefinedfunction()
alert("I guess you do exist")
} catch(e){
alert("An error has occured: "+e.message)
}
}
</script>
<form method="post">
<b>Demo:</b> <input type="button" value="Click Me" onClick="demo()" />
</form>
In the above case instead of catching the undefinedfunction(), the console logs "Syntax Error: illegal character". If I remove the meta tag, the function behaves as expected, alerting a message.
Does anyone know why this is the case?
Ah nevermind, it seems the problem was with the spaces inside the function, instead of tabs. I guess "utf-8" is picky about those kinds of things.
In a JSP, do I need to provide a jsp:root directive and an XML namespace declaration. Or only the later. That is, if I have the following:
<jsp:directive.page language="java"
contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"
/>
<jsp:root xmlns:c="http://java.sun.com/jsp/jstl/core"
xmlns:s="http://www.springframework.org/tags"
/>
<!DOCTYPE html>
<html xmlns:c="http://java.sun.com/jsp/jstl/core"
xmlns:s="http://www.springframework.org/tags">
<head>
... remainder of my HTML page
should I remove the jsp:root element? The information seems redundant. Removing the namespace declaration from the html element makes Eclipse complain.
You need the jsp:root element to set up the rest of the document to understand tags beginning with s: or c:. So don't remove it.
Is it possible to dynamically switch the title of a page that is served by Lift without having to write an extra snippet for that particular case?
One option is of course <lift:mySnippet><title>Default Title</title></lift:mySnippet> but I thought there might be an option along the lines of <head_merge><title>New Title</title></head_merge> (which inserts a second title node).
I do not like the first approach since I do not want to stick all the title generation logic into a single snippet and ask what kind of page I am on etc.
Have you tried to use templates?
You can define template in templates-hidden/default.html like this:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:lift="http://liftweb.net/">
<head>
<title>
<lift:bind name="title" />
</title>
...
</head>
<body>
<lift:bind name="content" />
</body>
</html>
And use it in index.html for example:
<lift:surround with="default">
<lift:bind-at name="title">Home</lift:bind-at>
<lift:bind-at name="content">
my content
</lift:bind-at>
</lift:surround>
You can find more information about templates here:
http://www.assembla.com/spaces/liftweb/wiki?id=liftweb&wiki_id=Templates_and_Binding
One way is to use the Menu.title snippet.
In bootstrap/liftweb/Boot.scala you define the sitemap with page names:
class Boot {
def boot {
// ...
def sitemap = SiteMap(
Menu.i("Home") / "index",
Menu.i("About") / "about")
// ...
}
}
In templates-hidden/default.html you use the snippet:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:lift="http://liftweb.net/">
<head>
...
<title class="lift:Menu.title">AppName:</title>
...
Then page titles will be: "AppName: Home" and "AppName: About". This is nice if you use
<span class="lift:Menu.builder"></span>
to build the menu, because page titles will be the same used in the menu.
Another approach is to use head merge and define the title in the page's html. For this to work, you have to remove the <title> tag from templates-hidden/default.html and put an <head> or <head_merge> tag in your content block:
<!DOCTYPE html>
<html>
<body class="lift:content_id=main">
<div id="main" class="lift:surround?with=default;at=content">
<head_merge>
<title>TITLE OF THIS PAGE HERE</title>
</head_merge>
...
In the main kid template file, I want it to have only div tags, each of which do only call a rendered kid file and paste content inside it. (like "include" function in php) but I don't know how to do this. Does someone have any ideas about it?
If you swap to genshi instead of the default kid you can do this with an include tag:
<xi:include href="menu.html" />
Swapping to genshi is fairly easy, I think its a matter of confuration only. The templates tags works otherwise the same. You should rename the extensions from .kid to .html though.
You can first define a "base_layout.kid" template:
<html xmlns:py="http://purl.org/kid/ns#">
<head>
<title>App Name - ${page_title}</title>
<link href="layout.css" type="text/css" rel="stylesheet" />
${page_specific_css()}
</head>
<body>
<h1>Now viewing: ${page_title} of App Name</h1>
<content>Default content</content>
<div class="footer">Page Footer Text</div>
</body>
</html>
Then replace the "content" tag in "page.kid" with whatever data you want:
<html py:layout="'base_layout.kid'"
xmlns:py="http://purl.org/kid/ns#">
<link py:def="page_specific_css()"
href="layout.css" type="text/css" rel="stylesheet" />
<div py:match="item.tag == 'content'">
<ul>
<li>Content Item 1</li>
<li>Content Item 2</li>
<li>Content Item 3</li>
</ul>
</div>
</html>
You can check whether you get the correct html in python shell (after removing all the identifiers used):
>>> import kid
>>> t = kid.Template("page.kid")
>>> print t.serialize()