change pro tip html

app_dialogue.py

@@ -480,11 +480,11 @@ with gr.Blocks(title="IDEFICS Playground", theme=gr.themes.Base()) as demo:
                 outputs=top_p,
             )
             gr.Markdown(
-                """**💡 Pro tip**:\\
-                You can input an arbitrary number of images at arbitrary positions in the same query.\\
-                You will need to input each image with its URL with the syntax `<fake_token_around_image><image:IMAGE_URL><fake_token_around_image>`.\\
-                For example, for two images, you could input `TEXT_1<fake_token_around_image><image:IMAGE_URL_1><fake_token_around_image>TEXT_2<fake_token_around_image><image:IMAGE_URL_2><fake_token_around_image>TEXT_3`.\\
-                In the particular case where two images are consecutive, it is not necessary to add an additional separator: `<fake_token_around_image><image:IMAGE_URL_1><fake_token_around_image><image:IMAGE_URL_2><fake_token_around_image>`."""
+                """<p><strong>💡 Pro tip</strong>:<br>
+                You can input an arbitrary number of images at arbitrary positions in the same query.<br>
+                You will need to input each image with its URL with the syntax <code>&lt;fake_token_around_image&gt;&lt;image:IMAGE_URL&gt;&lt;fake_token_around_image&gt;</code>.<br>
+                For example, for two images, you could input <code>TEXT_1&lt;fake_token_around_image&gt;&lt;image:IMAGE_URL_1&gt;&lt;fake_token_around_image&gt;TEXT_2&lt;fake_token_around_image&gt;&lt;image:IMAGE_URL_2&gt;&lt;fake_token_around_image&gt;TEXT_3</code>.<br>
+                In the particular case where two images are consecutive, it is not necessary to add an additional separator: <code>&lt;fake_token_around_image&gt;&lt;image:IMAGE_URL_1&gt;&lt;fake_token_around_image&gt;&lt;image:IMAGE_URL_2&gt;&lt;fake_token_around_image&gt;</code>.</p>"""
             )
 
     def model_inference(