trilium-ai-agent/code-blocks.css at main · mrbeandev/trilium-ai-agent · GitHub

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
/* ===========================================================
 * Trilium AI Agent — optional companion stylesheet
 *
 * Drops a Tokyo Night-inspired dark palette onto code blocks
 * (highlight.js tokens) on your Trilium share page. Pairs well
 * with `widget.js` but works independently.
 *
 * Install:
 *   1. Create a code/CSS note. Paste this entire file.
 *   2. Add the label `#shareHiddenFromTree` so it doesn't appear
 *      in the share sidebar.
 *   3. On your shared root note, add an INHERITABLE relation
 *      `~shareCss` → this note.
 *   4. Hard-refresh the share page (Ctrl+Shift+R).
 *
 * Uses Trilium's CSS custom properties so it harmonizes with the
 * theme the visitor picks (light/dark) — code background tracks
 * `--background-highlight`, text tracks `--text-primary`.
 * =========================================================== */

:root {
  --tai-code-comment:  #7a8aa8;
  --tai-code-keyword:  #bb9af7;
  --tai-code-builtin:  #7dd3fc;
  --tai-code-string:   #c3e88d;
  --tai-code-number:   #ff9e64;
  --tai-code-function: #82aaff;
  --tai-code-variable: #ffcb6b;
  --tai-code-attr:     #89ddff;
  --tai-code-tag:      #f7768e;
  --tai-code-meta:     #c792ea;
  --tai-code-operator: #89ddff;
  --tai-mono: "JetBrains Mono", "Fira Code", ui-monospace,
              SFMono-Regular, Menlo, Consolas, monospace;
}

/* ----- Block code ----- */
.ck-content pre,
.note-detail-readonly-text pre,
.note-detail-text pre,
.note-detail pre {
  background: var(--background-highlight) !important;
  color: var(--text-primary) !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  padding: 14px 16px !important;
  font-family: var(--tai-mono) !important;
  font-size: 13.5px !important;
  line-height: 1.55 !important;
  overflow-x: auto !important;
  box-shadow: none !important;
}

.ck-content pre code,
.note-detail-readonly-text pre code,
.note-detail-text pre code,
.note-detail pre code {
  background: transparent !important;
  color: inherit !important;
  padding: 0 !important;
  font-size: inherit !important;
  line-height: inherit !important;
  border: 0 !important;
  white-space: pre !important;
}

/* ----- Inline code chips ----- */
.ck-content :not(pre) code,
.note-detail-readonly-text :not(pre) code,
.note-detail-text :not(pre) code,
.note-detail :not(pre) code {
  background: var(--background-highlight) !important;
  color: var(--text-primary) !important;
  padding: 1px 6px !important;
  border-radius: 4px !important;
  font-family: var(--tai-mono) !important;
  font-size: 0.92em !important;
  border: 0 !important;
}

/* ----- highlight.js tokens ----- */
.hljs-keyword,
.hljs-selector-tag,
.hljs-literal      { color: var(--tai-code-keyword)  !important; font-weight: 600; }

.hljs-built_in,
.hljs-class        { color: var(--tai-code-builtin)  !important; font-weight: 600; }

.hljs-string,
.hljs-doctag,
.hljs-regexp       { color: var(--tai-code-string)   !important; }

.hljs-number,
.hljs-symbol       { color: var(--tai-code-number)   !important; }

.hljs-comment,
.hljs-quote        { color: var(--tai-code-comment)  !important; font-style: italic; }

.hljs-function,
.hljs-title,
.hljs-title.function_,
.hljs-section      { color: var(--tai-code-function) !important; }

.hljs-variable,
.hljs-template-variable,
.hljs-params       { color: var(--tai-code-variable) !important; }

.hljs-attr,
.hljs-attribute,
.hljs-property     { color: var(--tai-code-attr)     !important; }

.hljs-tag,
.hljs-name,
.hljs-deletion     { color: var(--tai-code-tag)      !important; }

.hljs-meta,
.hljs-meta-keyword { color: var(--tai-code-meta)     !important; }

.hljs-operator     { color: var(--tai-code-operator) !important; }

.hljs-addition     { color: var(--tai-code-string)   !important;
                     background: rgba(195, 232, 141, 0.10); }

/* Subtle scrollbar inside code blocks */
.ck-content pre::-webkit-scrollbar,
.note-detail pre::-webkit-scrollbar { height: 8px; }
.ck-content pre::-webkit-scrollbar-thumb,
.note-detail pre::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.10);
  border-radius: 4px;
}