themes/default/layouts/shortcodes/mark: Support id

2 files changed, 28 insertions, 6 deletions

diff --git a/assets/css/default.css b/assets/css/default.css
index 3d39f05..c759b46 100644
--- a/assets/css/default.css
+++ b/assets/css/default.css
@@ -253,7 +253,8 @@ dl:not(:last-child),
 table:not(:last-child),
 figure:not(:last-child),
 code-block:not(:last-child),
-blockquote:not(:last-child) {
+blockquote:not(:last-child),
+article > mark[id]:not(:last-child) {
   margin-bottom: 0.75rem;
 }
 
@@ -297,7 +298,23 @@ sub {
   display: inline-block;
 }
 
-mark {
+article > mark[id] {
+  display: block;
+}
+
+mark:target a {
+  color: inherit;
+  text-decoration-thickness: 2px;
+}
+
+mark[id] {
+  background: none;
+  color: inherit;
+  scroll-margin-top: 6rem;
+}
+
+mark,
+mark:target span {
   background: linear-gradient(
     to bottom,
     transparent 10%,
@@ -312,8 +329,7 @@ mark {
     var(--warning-background) 90%,
     transparent 90%
   );
-  color: #332600;
-  color: var(--warning);
+  color: #000;
 }
 
 ins {
diff --git a/themes/default/layouts/shortcodes/mark.html b/themes/default/layouts/shortcodes/mark.html
index 122a521..1b9ef3d 100644
--- a/themes/default/layouts/shortcodes/mark.html
+++ b/themes/default/layouts/shortcodes/mark.html
@@ -1,9 +1,15 @@
 {{- $text  := default "mark"             (.Get "text"  | default (.Get 0)) -}}
 {{- $title := default "highlighted text" (.Get "title" | default (.Get 1)) -}}
+{{- $id    := default ""                 (.Get "id"    | default (.Get 2)) -}}
 
 {{- if gt (len .Inner) 1 -}}
-  {{- $text = .Inner -}}
+  {{- $text = trim .Inner "\n" -}}
 {{- end -}}
 
-<mark title="{{- $title -}}">{{- $text -}}</mark>
+{{- if $id -}}
+  {{- $id = print "mark:" (truncate 30 "" $text | anchorize | replaceRE `\d` "") -}}
+  {{- $id = printf `id=%q` $id -}}
+{{- end -}}
+
+<mark {{ $id | safeHTMLAttr }} title="{{- $title -}}"><span>{{- $text | markdownify -}}</span></mark>
 {{- /* This comment removes trailing newlines and white spaces. */ -}}