How do I display a Python list as seperate lines on a HTML page?

sorry if this question is a little basic or doesn’t properly explain the problem, I’m fine to answer any questions if I haven’t explained well enough. It’s my first time using HTML and I’m working with a pre-given program I don’t fully understand.

I have a python program, app.py, here which is reading a list of strings from a text file and then creating a HTML page based on a template, index.html

file1 = open("costs.txt")
lines = file1.readlines()



#------------------------------------------------------------
# the index page
#------------------------------------------------------------

@app.route('/')
def home():
    return render_template('index.html', server_url=BUGGY_RACE_SERVER_URL, Lines=lines)

I’m passing in the list of lines and I need to display them as a list on the HTML page, but HTML only displays it as a single line of text, with "/n" printed between each line. I’ve looked into it, and I know <br /> tag works to display it on the next line, but replacing /n with <br /> doesn’t work (it just displays "<br />"). Is there an easy way to solve this? Or even a hard way? I’ll include the full code for both app.py and index.html below in case its important

app.py –

from flask import Flask, render_template, request, jsonify
import os
import sqlite3 as sql

# app - The flask application where all the magical things are configured.
app = Flask(__name__)

# Constants - Stuff that we need to know that won't ever change!
DATABASE_FILE = "database.db"
DEFAULT_BUGGY_ID = "1"
BUGGY_RACE_SERVER_URL = "https://rhul.buggyrace.net"



file1 = open("costs.txt")
lines = file1.readlines()



#------------------------------------------------------------
# the index page
#------------------------------------------------------------

@app.route('/')
def home():
    return render_template('index.html', server_url=BUGGY_RACE_SERVER_URL, Lines=lines)

index.html –

{% extends "base.html" %}

{% block content %}



  <h1>
    My buggy editor
  </h1>

  <div class="spacer">
    <a href="/new" class="button">Make buggy</a>
    <a href="/buggy" class="button">Show buggy</a>
    <a href="/json" class="button">Get buggy JSON</a>
  </div>

  <pre>
   {{Line}}
  </pre>

  <p>
    1 <br />
    2
  </p>

>Solution :

I think you need to use the template loop function to access each individual line in the list.

Try this:

{% for item in Line %}
<pre>{{item}}</pre>
<br />
{% endfor %}