Show how to create an anchor link (#1833)

* Show how to create an anchor link * Update Guide/recipes.markdown * Update recipes.markdown
digitallyinduced · Oct 2, 2023 · 817b27c · 817b27c
1 parent cfb0a97
commit 817b27c
Showing 1 changed file with 5 additions and 1 deletion.
diff --git 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.