Applying escaping of theme contents (#40597)

Closes #40596

Signed-off-by: Alexander Schwartz <aschwart@redhat.com>

docs/guides/ui-customization/themes.adoc

@@ -252,7 +252,10 @@ Or to use directly in HTML templates add the following to a custom HTML template
 In order to use a custom footer, create a `footer.ftl` file in your custom login theme with the desired content.
 
 An example for a custom `footer.ftl` may look like this:
-```
+
+[source]
+----
+<#noparse>
 <#macro content>
 <#-- footer at the end of the login box -->
 <div>
@@ -263,7 +266,8 @@ An example for a custom `footer.ftl` may look like this:
     </ul>
 </div>
 </#macro>
-```
+</#noparse>
+----
 
 === Adding an image to an email theme
 
@@ -322,13 +326,15 @@ For a list of templates in other theme types look at the `theme/base/<THEME_TYPE
 +
 For example, to create a custom login form for the `mytheme` theme, copy `themes/base/login/login.ftl` to `themes/mytheme/login` and open it in an editor.
 +
-${r"After the first line (<#import ...>), add `<h1>HELLO WORLD!</h1>` as shown here:"}
+After the first line (`+<#noparse><#import ...></#noparse>+`), add `<h1>HELLO WORLD!</h1>` as shown here:
 +
 [source,html]
 ----
-${r"<#import"} "template.ftl" as layout>
+<#noparse>
+<#import "template.ftl" as layout>
 <h1>HELLO WORLD!</h1>
 ...
+</#noparse>
 ----
 
 . Back up the modified template. When upgrading to a new version of {project_name} you may need to update your custom templates to apply changes to the original template if applicable.
@@ -408,4 +414,4 @@ If enabled, the dark variant of the theme will be applied based on user preferen
 == Additional resources for Themes
 * For more inspiration, see <<_default-themes,Default Themes>> bundled inside {project_name}.
 * {quickstartRepo_link}[{quickstartRepo_name}] - Directory `extension` of the quickstarts repository contains some theme examples, which can be also used as an inspiration.
-</@tmpl.guide>
+</@tmpl.guide>