Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to insert raw HTML in Pug file (not include external HTML file)

Tags:

html

pug

So what I want is to put some multiline HTML into a Pug file and can't find anywhere how to do this.

Example:

html
    head

    body
        <div><a href="lala"> blabla </a></div>

        p hihuhohoo
like image 273
ditoslav Avatar asked Nov 24 '14 14:11

ditoslav


People also ask

How do I add HTML to my PUG file?

Simply create a new pen, then select Settings > HTML and choose Pug as your preprocessor.

Is PUG better than HTML?

Notice that coding using the PUG framework is much easier and more readable than thr HTML codes. PUG makes use of indentation to distinguish between where a tag starts and ends. This makes the code much cleaner than HTML, where lack of indentation and a need for closing tags makes the code a little cluttered.

What is HTML PUG extension?

A PUG file is a template written in the Pug language, which is a shorthand HTML language that is used similarly to the Emmet and Markdown languages. It contains HTML code in the standard syntax but does not include closing tags and instead emphasizes indentations.


2 Answers

Pug text can include HTML. Just force it as text, and it should parse:

html     head      body         | <div><a href="lala"> blabla </a></div>          p hihuhohoo 

Also, you were using backslashes, not forward slashes, to close elements.

like image 196
Scimonster Avatar answered Oct 12 '22 08:10

Scimonster


This is a tested example with passing variables with raw html to the pug file:

yourSourceFile.js

const p1 = 'This server uses a <a href="https://pugjs.org/api/getting-started.html" target="_blank">pug template</a> for the html output'
res.render('yourTemplateFile', { title: 'Hey', p1 })

yourTemplateFile.pug

html
  head
    title= title
  body
    p
      | !{p1}
like image 29
Roman Avatar answered Oct 12 '22 07:10

Roman