I am using jade as a kind of markup language for a thermal printer. That means on the website i render a print preview to html, and i am sending the jade(with custom tags) directly to the printer which interprets the tags for different text styles.
It works pretty well but now i would like to use also locals in that template but render only the locals not to html.
That means
p #{name}
should become
p John Doe
instead of
<p>John Doe</p>
Is there a possibility to do this with some function in the jade package ? Or do i need to write that from scratch. I also want to use jade "each" loop.
You can prefix it with a pipe symbol:
| p #{name}
Related
I am learning to use the MVC architecture with Node, Express and Pug and am having trouble finding out how to properly access the DOM (in this case to add an EventListener). The documentation is quite terse and I wasn't able to find a solution elsewhere... which leads me to suspect I might be going about this all wrong?
This is the .pug file in question (simplified to highlight problem):
extends layout
block content
h1= title
div= foo
div
label Bar
input(
type='text'
name='city'
placeholder='start typing...'
)
input(type='submit' id='submitbtn' value='Submit')
- document.addEventListener('keydown', event => {console.log("Bleep!")})
- document.getElementById('submitbtn').addEventListener('click', () => doSomething())
^^^^^^^^
When Express attempts to render this page, I get the following error:
Only named blocks and mixins can appear at the top level of an
extending template
Am I barking up the wrong tree? If so, what is the proper way to access the DOM within the Node /
Express / Pug framework?
The error message is correct:
Only named blocks and mixins can appear at the top level of an extending template
In your example, you also have inline code at the top level of the template, which isn't allowed. You should indent those inside of the named block content.
Additionally, DOM javascript doesn't run while pug is compiling. It only runs in the browser once the Pug has compiled into HTML. In order to get that script to run, you need to place it in a script element just like you would if you were writing regular HTML.
extends layout
block content
h1= title
div= foo
div
label Bar
input(
type='text'
name='city'
placeholder='start typing...'
)
input(type='submit' id='submitbtn' value='Submit')
script.
document.addEventListener('keydown', event => {console.log("Bleep!")})
document.getElementById('submitbtn').addEventListener('click', () => doSomething())
I installed the pug-bootstrap module in a nodejs project. I am trying to create a menu from a navbar.
I have done those files:
layout.pug:
include /node_modules/pug-bootstrap/_bootstrap.pug
index.pug:
extends layout
block head
+navbar("menu")
+nav_item("#", undefined, true)
string test
block body
h1= title
p Welcome to #{title}
the _bootstrap.pug contains the bootstrap css file : https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css. But it is not loaded on the webpage.
Someone know why? And how to fix that?
Any help would be appreciate.
When you extend a part of a template with block, you're replacing any code that was already in that block, before. In this case, I assume that the head included a reference to that CSS file, which you're overwriting.
Generally speaking, use append instead of block for the head section (see this page from their docs). That way, previous content of parent templates is not overwritten.
In your usecase, I am doubtful whether you should be placing anything at all in that head block, since it is reserved for meta-tags, not for actual visible content. In other words: You'll need to move the code you have there to the body anyway, since visible document objects belong in the body, not in the head.
How do i print nice formatted html?
I want something like app.locals.pretty = true.
ExpressJS: how to output pretty html
According to Text.Hamlet.Html's definition, Hamlet uses blaze-markup for its output. blaze-markup, in turn, has a renderer backend with the promising name Text.Blaze.Renderer.Pretty.
So I think what should work is if you run your Hamlet templates to get the final Html, and then render it yourself by calling Text.Blaze.Renderer.Pretty.renderMarkup.
Or can you render partially and render rest later. So lets say when app starts up it renders most of the html. But when user abc wants to see his profile jade renders name to abc and merge it with regular pre rendered html and then you send it etc.
Rendering whole html pages at every request seems like a waste.
Converting all static html to jade seems like a annoyance that can be avoided. Slowly css became LESS and html became JADE?
I am lost on how to use jade I am learning express.
You can use Jade's compileClient function to create a function that will render predefined Jade code on the fly. (See the API reference.)
So, if you create a Jade file with the dynamic HTML, and compile that for the client, you can then call that function at a later time, and insert the resulting HTML string to the DOM.
I have a small issue implementing TinyMCE into a Symfony project. I get the text editor to come up and save rich text to a database field. But when I go to "echo" it on a page, I get all the HTML tags instead of the rich text itself. Is there a special way that I need to "echo" this so that it parses the html? I also want it so that when people manually type in html tags, that they are displayed as regular text (to avoid people people adding hyperlinks and other unwanted things to their posts). Here is what displays:
<p>Test</p> <p><strong>Bold Test</strong></p> <p><span style="text-decoration: underline;"><strong>Underline Text</strong></span></p>
Instead of this:
Test Bold Test Underline Text
Symfony2 uses output escaping for security. You can read about it here: http://symfony.com/doc/current/book/templating.html#output-escaping
To echo a variable without escaping it you can do this:
{{ article.body|raw }}
In order to clean up and restrict which tags can be used you will want to use HTMLPurifier which has a bundle here: https://github.com/Exercise/HTMLPurifierBundle
For Symfony 1.4
Symfony 1.4 has similar output escaping. You can get the raw data with:
$sf_data->getRaw('varName');
or if it's a method on an object you can add ESC_RAW as a parameter to the method call (warning: symfony will do some magic here)
$myObject->getMessage(ESC_RAW);
more on 1.4 output escaping here