Displaying "\n" in phoenix templates

TwistingTwists · February 10, 2022, 5:11pm

I have a string which has “\n” but they are not being displayed properly. “\n” is being treated as if it does not exist.

<p>Question : <%= Phoenix.HTML.raw(rr["question"]) %></p>
<p>Question : <%= rr["question"] %></p>

both of above return same result with “\n” being eaten up by phoenix template.

What am i missing?

LostKobrakai · February 10, 2022, 5:19pm

Whitespace is not significant in plain html. Either use Phoenix.HTML.Format.text_to_html to convert whitespace into the related html tags or wrap the whole html in <pre></pre> tags.

seva · July 15, 2024, 11:24am

For those looking for a solution in 2024+ or if your app broke during the migration to a newer version of Phoenix, the functions were moved to the :phoenix_html_helpers library, see the changelog: phoenix_html/CHANGELOG.md at main · phoenixframework/phoenix_html · GitHub

github.com

phoenixframework/phoenix_html_helpers/blob/main/lib/phoenix_html_helpers/format.ex

defmodule PhoenixHTMLHelpers.Format do
  @moduledoc """
  Formatting functions.
  """

  @doc ~S"""
  Returns text transformed into HTML using simple formatting rules.

  Two or more consecutive newlines `\n\n` or `\r\n\r\n` are considered as a
  paragraph and text between them is wrapped in `<p>` tags.
  One newline `\n` or `\r\n` is considered as a linebreak and a `<br>` tag is inserted.

  ## Examples

      iex> text_to_html("Hello\n\nWorld") |> safe_to_string
      "<p>Hello</p>\n<p>World</p>\n"

      iex> text_to_html("Hello\nWorld") |> safe_to_string
      "<p>Hello<br>\nWorld</p>\n"

This file has been truncated. show original

Alternative solution, if all you need is to preserve line breaks is to use <pre></pre> tags or CSS properties white-space: pre-wrap; or white-space: pre-line; (tailwind whitespace-pre-line or whitespace-pre-wrap).