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
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ligature Emulation in Emacs</title>
<style>
@font-face {
font-family: 'Quattrocento';
font-weight: 400;
src: url(/fonts/quattrocento-latin.woff2) format('woff2');
font-display: swap;
}
@font-face {
font-family: 'Open Sans';
font-weight: 300;
src: url(/fonts/open-sans-latin.woff2) format('woff2');
font-display: swap;
}
body {
font-family: 'Quattrocento', serif;
font-size: 20px;
line-height: 1.5em;
margin: 0 auto;
max-width: 60ch;
padding: 1em 0.5em;
background: #fff;
color: #111;
}
@media (min-width: 40em) { body { padding: 1em 2em; } }
@media (prefers-color-scheme: dark) {
body { background: #1a1a1a; color: #ddd; }
a { color: #adf; }
a:visited { color: #c9a0ff; }
hr { border-top-color: #444; }
}
h1, h2, h3 { font-family: 'Open Sans', sans-serif; }
h1 { font-weight: 300; }
h2, h3 { font-weight: 400; margin-top: 2em; }
.meta { font-size: 0.85em; color: #666; margin-top: -0.5em; }
@media (prefers-color-scheme: dark) { .meta { color: #999; } }
hr { border: none; border-top: 1px solid #ccc; margin: 2em 0; }
pre {
background: #f5f5f5;
border: 1px solid #ddd;
border-radius: 3px;
padding: 0.75em 1em;
overflow-x: auto;
font-size: 0.75em;
line-height: 1.4em;
}
code { font-size: 0.85em; }
pre code { font-size: 1em; }
@media (prefers-color-scheme: dark) {
pre { background: #222; border-color: #444; }
}
ul { padding-left: 1.2em; }
li { margin-bottom: 0.4em; }
</style>
</head>
<body>
<h1>Ligature Emulation in Emacs</h1>
<p class="meta">2017-05-04 · It's not pretty, but the results are</p>
<hr>
<p>Monday was (yet another)
<a href="https://www.meetup.com/Munich-NixOS-Meetup/events/239077247/">NixOS hackathon</a>
at <a href="https://openlab-augsburg.de">OpenLab Augsburg</a>.
<a href="https://github.com/maximilianhuber">Maximilian</a> was there and to my amazement
he got working ligatures in his Haskell files in Emacs! Ever since Hasklig
updated its format to use ligatures and private Unicode code points a while ago,
the hack I had used in my config stopped working.</p>
<p>Encouraged by that I decided to take a look on Tuesday. Long story short, I was
able to <a href="https://github.com/i-tu/Hasklig/issues/84#issuecomment-298803495">get it working in a pretty satisfying way</a>.</p>
<p>What's left to do is package it into a module and push to melpa.</p>
<h3>elisp still sucks, but it's bearable, sometimes</h3>
<p>I'm the kind of person who, when trying to fix something elisp related, normally
gives up two hours later and three macro calls deep. Yes, homoiconic,
non-lexically-scoped, self-rewriting code is not exactly my fetish.
This time the task and the library (<code>prettify-symbols-mode</code>) were simple enough
for that to not happen.</p>
<p>Some interesting technical trivia:</p>
<ul>
<li>elisp literal character syntax is <code>?c</code>. <code>?\t</code> is the tab character</li>
<li>You join characters by <code>(string c1 c2 c3 ...)</code></li>
<li><a href="https://github.com/magnars/dash.el">dash.el</a> is pretty awesome and does what a functional programmer
expects. Also, Rainbow Dash.</li>
<li>Hasklig and FiraCode multi-column symbols actually <a href="https://github.com/tonsky/FiraCode/issues/211#issuecomment-239082368">only occupy one column, on
the far right of the glyph</a>. <code>my-correct-symbol-bounds</code> fixes emacs'
rendering in that case.</li>
</ul>
<h2>Appendix A</h2>
<p>For reference, here's the complete code as it stands now. Feel free to paste
into your config; let's make it <a href="https://opensource.org/licenses/MIT">MIT</a>. Maybe link to this site, in case there are
updates.</p>
<pre><code>(defun my-correct-symbol-bounds (pretty-alist)
"Prepend a TAB character to each symbol in this alist,
this way compose-region called by prettify-symbols-mode
will use the correct width of the symbols
instead of the width measured by char-width."
(mapcar (lambda (el)
(setcdr el (string ?\t (cdr el)))
el)
pretty-alist))
(defun my-ligature-list (ligatures codepoint-start)
"Create an alist of strings to replace with
codepoints starting from codepoint-start."
(let ((codepoints (-iterate '1+ codepoint-start (length ligatures))))
(-zip-pair ligatures codepoints)))
; list can be found at https://github.com/i-tu/Hasklig/blob/master/GlyphOrderAndAliasDB#L1588
(setq my-hasklig-ligatures
(let* ((ligs '("&&" "***" "*>" "\\\\" "||" "|>" "::"
"==" "===" "==>" "=>" "=<<" "!!" ">>"
">>=" ">>>" ">>-" ">-" "->" "-<" "-<<"
"<*" "<*>" "<|" "<|>" "<$>" "<>" "<-"
"<<" "<<<" "<+>" ".." "..." "++" "+++"
"/=" ":::" ">=>" "->>" "<=>" "<=<" "<->")))
(my-correct-symbol-bounds (my-ligature-list ligs #Xe100))))
;; nice glyphs for haskell with hasklig
(defun my-set-hasklig-ligatures ()
"Add hasklig ligatures for use with prettify-symbols-mode."
(setq prettify-symbols-alist
(append my-hasklig-ligatures prettify-symbols-alist))
(prettify-symbols-mode))
(add-hook 'haskell-mode-hook 'my-set-hasklig-ligatures)</code></pre>
<h2>Appendix B (Update 1): FiraCode integration</h2>
<p>I also created a mapping for <a href="https://github.com/tonsky/FiraCode/">FiraCode</a>. You need to grab the
<a href="https://github.com/tonsky/FiraCode/issues/211#issuecomment-239058632">additional symbol font</a>
that adds (most) ligatures to the unicode private use area.
Consult your system documentation on how to add it to your font cache.
Next add <code>"Fira Code"</code> and <code>"Fira Code Symbol"</code> to your font preferences. Symbol
only contains the additional characters, so you need both.</p>
<p>If you are on NixOS, the font package should be on the main branch shortly,
<a href="https://github.com/NixOS/nixpkgs/pull/25517">I added a package</a>.</p>
<p>Here's the mapping adjusted for FiraCode:</p>
<pre><code>(setq my-fira-code-ligatures
(let* ((ligs '("www" "**" "***" "**/" "*>" "*/" "\\\\" "\\\\\\"
"{-" "[]" "::" ":::" ":=" "!!" "!=" "!==" "-}"
"--" "---" "-->" "->" "->>" "-<" "-<<" "-~"
"#{" "#[" "##" "###" "####" "#(" "#?" "#_" "#_("
".-" ".=" ".." "..-" "..." "?=" "??" ";;" "/*"
"/**" "/=" "/==" "/>" "//" "///" "&&" "||" "||="
"|=" "|>" "^=" "$>" "++" "+++" "+>" "=:=" "=="
"===" "==>" "=>" "=>>" "<=" "=<<" "=/=" ">-" ">="
">=>" ">>" ">>-" ">>=" ">>>" "<*" "<*>" "<|" "<|>"
"<$" "<$>" "<!--" "<-" "<--" "<->" "<+" "<+>" "<="
"<==" "<=>" "<=<" "<>" "<<" "<<-" "<<=" "<<<" "<~"
"<~~" "</" "</>" "~@" "~-" "~=" "~>" "~~" "~~>" "%%"
"x" ":" "+" "+" "*")))
(my-correct-symbol-bounds (my-ligature-list ligs #Xe100))))</code></pre>
</body>
</html>
|