mdpreviewer 0.1.2

Live-reloading browser preview for a single Markdown file, with mermaid diagrams and cursor sync for Helix.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159

:root {
  color-scheme: dark;
}

body {
  margin: 0;
  background: #0d1117;
}

/*
 * github-markdown.css styles the .markdown-body element itself; here we only
 * constrain its width and give it breathing room within the page.
 */
.markdown-body {
  box-sizing: border-box;
  max-width: 900px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 6rem;
}

/* Rendered mermaid diagrams: centered, transparent, and scaled to fit. */
pre.mermaid,
.mermaid {
  background: transparent;
  text-align: center;
  overflow: visible;
}

pre.mermaid svg,
.mermaid svg {
  max-width: 100%;
  height: auto;
}

/* Diagrams and images are click-to-zoom; hint that with the cursor. */
.markdown-body pre.mermaid,
.markdown-body img {
  cursor: zoom-in;
}

/* A linked image follows its link instead of zooming, so it keeps the
 * pointer cursor. */
.markdown-body a img {
  cursor: pointer;
}

/*
 * Zoom overlay: a full-window view of one diagram, image, table or code block.
 * The figure is centered by `left/top: 50%` plus a `translate(-50%, -50%)` in
 * the transform, so pan and zoom are a single matrix on one element.
 */
.mdpreviewer-zoom {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(1, 4, 9, 0.94);
  overflow: hidden;
  cursor: grab;
  /* Keep touch gestures from scrolling the page behind the overlay. */
  touch-action: none;
  overscroll-behavior: contain;
}

.mdpreviewer-zoom[hidden] {
  display: none;
}

/* While panning, text must not select: the drag is a pan, not a selection.
 * The rule is scoped to the drag, so selection is untouched at rest. */
.mdpreviewer-zoom.is-panning {
  cursor: grabbing;
  -webkit-user-select: none;
  user-select: none;
}

.mdpreviewer-zoom-figure {
  position: absolute;
  left: 50%;
  top: 50%;
  transform-origin: 50% 50%;
  will-change: transform;
}

/* The figure carries .markdown-body so cloned tables and code keep their
 * theme, but none of the page layout that class normally applies. */
.mdpreviewer-zoom .markdown-body {
  max-width: none;
  margin: 0;
  padding: 0;
  background: transparent;
}

.mdpreviewer-zoom-hint,
.mdpreviewer-zoom-close {
  position: absolute;
  color: #9198a1;
  background: rgba(13, 17, 23, 0.85);
  border: 1px solid #3d444d;
  border-radius: 6px;
  font-family: system-ui, sans-serif;
  font-size: 12px;
}

.mdpreviewer-zoom-hint {
  left: 50%;
  bottom: 1rem;
  transform: translateX(-50%);
  padding: 0.35rem 0.75rem;
  pointer-events: none;
  white-space: nowrap;
}

.mdpreviewer-zoom-close {
  top: 1rem;
  right: 1rem;
  width: 2rem;
  height: 2rem;
  padding: 0;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.mdpreviewer-zoom-close:hover {
  color: #f0f6fc;
}

/* Front matter: a muted, collapsed YAML block above the document body. */
.markdown-body details.frontmatter {
  margin-bottom: 1.5rem;
  /* Same muted grey the vendored theme uses for blockquotes. */
  color: #9198a1;
  font-size: 85%;
}

.markdown-body details.frontmatter summary {
  cursor: pointer;
}

.markdown-body details.frontmatter pre {
  margin: 0.5rem 0 0;
}

/* Scroll target: a brief outline around the block under the editor's cursor. */
.markdown-body .mdpreviewer-target {
  /* The vendored dark theme's accent blue. */
  outline: 2px solid #4493f8;
  outline-offset: 4px;
  animation: mdpreviewer-target-fade 1.2s ease-out forwards;
}

@keyframes mdpreviewer-target-fade {
  from {
    outline-color: #4493f8;
  }
  to {
    outline-color: transparent;
  }
}