From 817b27cf487d1cf0d4d11912ed87025c655ed4f8 Mon Sep 17 00:00:00 2001
From: Amitai Burstein <amitai@gizra.com>
Date: Mon, 2 Oct 2023 17:47:05 +0300
Subject: [PATCH] Show how to create an anchor link (#1833)

* Show how to create an anchor link

* Update Guide/recipes.markdown

* Update recipes.markdown
---
 Guide/recipes.markdown | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/Guide/recipes.markdown b/Guide/recipes.markdown
index b2575fa1c..f257d16fc 100644
--- a/Guide/recipes.markdown
+++ b/Guide/recipes.markdown
@@ -430,7 +430,11 @@ case post of
 
 ## Highlight the targeted element
 
-Let's say you have a page with comments, and you link to them with `<a href="#comment-<comment ID>">`.
+Let's say you have a page with comments, and you link to them with `<a href="#comment-<comment ID>">`. You can build it like this (assuming you have a `comment.id`):
+
+```haskell
+[hsx|<a href={"#comment-" ++ show comment.id} id={"comment-" ++ show comment.id}>|]
+```
 
 The browser will scroll to the relevant comment when you follow the link, but let's say you also want to highlight the linked comment — like GitHub does. You could use the `:target` selector, but it doesn't play well with Turbolinks.