Jinja not rendering in HTML file - html

Question

This is probably some sort of silly misunderstanding, but I'm trying to include some Jinja code in my HTML file, as in this file which I found on github:
{% extends "bootstrap/base.html" %}
{% block title %}
Demo App
{% endblock %}
{% block styles %}
{{super()}}
<link rel="stylesheet" href="{{url_for('.static', filename='starter-
template.css')}}">
{% endblock %}
{% block content %}
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Login</li>
<li>Sign Up</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container">
<div class="starter-template">
<h1>Bootstrap starter template</h1>
<p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
</div>
</div><!-- /.container -->
{% endblock %}
You'll see that the Jinja code is enclosed in the "{% ... %}." However, when I run this file in my web browser, I get the following:
As you can see at the top of the screenshot, instead of executing the Jinja code, the Jinja is being read as HTML text. How can this be fixed?
Thank you!

Answer 1

the jinja templates are not supposed to be viewed in browsers. flask will generate and serve proper html, generated from your templates, when requested.