CODEWITHSUNDEEP
javascripthtmlnode.jsexpress
Lazy
Lazy

Reputation: 1837

HTML is not rendering - Express

I'm making a simple blog app for my site and fetching posts from array. When I try to use HTML tags in the posts I'm seeing they are not rendering, rest of page is ok.

Posts:

{"post_id":1, 
 "post_title":"Title", 
 "post_body":"This is a test text. <b> I'm testing HTML.</b> "} ....

Output in the page is : 

This is a test text. <b> I'm testing HTML.</b>

Server-side:

var hbs = require('hbs');

// view engine setup
app.set('view engine', 'html');
app.engine('html', hbs.__express);

app.get('/post/:id', function(req, res) {
    res.render('post_theme',
    {post, title etc...});
    });

HTML:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
  <title>Page</title>
  <!-- font css -->
  <link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" type="text/css" href="/lib/semantic/build/packaged/css/semantic.css">
  <link rel="stylesheet" type="text/css" href="/stylesheets/style.css">
  <!-- js -->
  <script src="/javascripts/jquery.js"></script>
  <script src="/lib/semantic/build/packaged/javascript/semantic.js"></script>


</head>
<body id="home">
 <div class="ui menu" >
....
</div>

        <h3 class="ui header">{{title}}</h3>
        <p>{{body}}</p>

</body>


</html>

Why HTML is not rendering?

(Actually I'm not sure this is Express question, I'm new to Web development.)

Solution:

Based on Andrew Counts answer I used three brackets and problem is solved. {{{...}}}

Upvotes: 0

Views: 1352

Answers (1)

Claies
Claies

Reputation: 22323

In handlebars templates, HTML codes are escaped from variables automatically, in order to ensure that values stored are not able to break the page code flow. if you are SURE that you do want to output the HTML stored in a variable, and that it will not break your page, you can instruct Handlebars to not escape the HTML, either by using triple braces {{{ }}}, or by storing the value as type 'Handlebars.SafeString`.

http://handlebarsjs.com/

Upvotes: 4

Related Questions