Many people shared how they use Emacs as an OS. My goal is really humble in comparison. I DON'T require Emacs to

• Browsing the web — Emacs's EWW can indeed do this, but I have never use it to browsing the web;
  
• Reading E-Mail — Gmail works fine (I have configured Gnus, but don't want to share it for privacy reason);
  
• Reading PDF — Emacs's built-in PDF reader doesn't support continuous scrolling, and cannot take notes;
  
• Translation and Grammarly — Use browser;
  
• Listening to Music — Use VLC;
  
• …
  

In principle, all of these requests can be satisfied in modern browsers and GUI applications. If, according to some cynical persons, that "text browsers are orthodox and all other GUI browsers are heretical", then reading PDF violates their own credo.

However, if anyone can implement these features, I'd really appreciate it:

• editing files & run tests in console (which is what an IDE should look like).
  
• Yet another Jupyter, in Emacs
  
  • Execute code block by block;
    
  • Render/preview results in LaTeX.
    
• Org mode to export blogs
  
  • Not rely on Hexo or Hugo;
    
  • Looks like Hexo's NexT.Pisces.
    
  • Sidebar TOC.
    

Math and science students are very attached to the block-by-block execution feature of Jupyter and Mathematica. Mahmood Sheikh made it possible to use Emacs Org mode as Jupyter. This article is inspired by that.

有不少人分享出自己如何把 Emacs 当作 OS 来用. 我的目标相比之下就很卑微, 我真的 不需要 用 Emacs 来

• 浏览网页 — Emacs 的确也可以, 但我从不使用它来浏览网页;
  
• 阅读邮件 — Gmail 本身就很好用 (其实我也配了 Gnus, 但隐私起见不便分享);
  
• 阅读 PDF — Emacs 自带的 PDF 阅读器 不支持 continuous scrolling, 也不能在上面做笔记;
  
• 翻译 — 用浏览器就好了;
  
• 听歌 — 怼码时间怼码, 听歌时间听歌, alright?
  
• …
  

原则上讲, 这些功能都可以在现代浏览器以及 GUI 应用程序上使用. 如果按某些人的话讲, 用 text browser 才是正统, 其他 GUI browser 都是异端, 那么他们 阅读 pdf 也是违背了自己的信条的.

但是如果有谁能实现这些功能, 那我真的会谢:

• 编辑文件 & console 运行测试 (也就是一个 IDE 应有的模样);
  
• 像 Jupyter 那样使用 Emacs
  
  • 逐块执行代码
    
  • 用 LaTeX 渲染出结果
    
• Org mode 导出博客
  
  • 不借助 Hexo 和 Hugo;
    
  • 长得像 Hexo 的 NexT.Pisces;
    
  • 侧边 TOC.
    

数理系学生对 Jupyter 和 Mathematica 的逐块执行的功能有很大粘性. Mahmood Sheikh 做到了把 Emacs Org mode 当 Jupyter 来用. 受此启发, 就有了本文.

Use Emacs as an IDE:

• 29 Maintaining (GNU Emacs Manual)
  
• C/C++ Development Environment for Emacs
  
• What's your setup for C/C++ in emacs ? : emacs
  
• GitHub - junahan/junahan-emacs: Emacs config for c/c++
  

Use Emacs as yet another Jupyter:

• Mahmood Sheikh: the real reason emacs is superior - org+latex+sagemath : r/emacs 👍
  
• Mahmood Sheikh's repo: mahmoodsheikh36/dotfiles: my config files for various programs like emacs
  
• 怎样用 Emacs 做所有事 - YouTube
  

As you can read from many other blogs, the author's editor's usage history affects her/his Emacs config preference, especially the key-binding. For example, if the person has used Vim previously, it's very likely that she/he will use evil, the plugin that uses the Vim's kbd in Emacs. I used Sublime Text before, and don't have history baggage on Vim, so I don't use evil, ivy, helm etc other popular plugins (I think they dirty the native configurations and increase unnecessary complications).

I customized shortcuts in init-kbd.el, s.t. operations like single line scroll, compile etc can done with left hand. Here are some of them:

• C-z & M-z are bounded to one-line scroll down/up. They were previously bounded to suspend-frame (nothing but minimize to system icon) & zap-to-char, both were barely used, so I make full use of them.
  
• C-x C-v & C-x M-v are bounded to half screen scroll down/up.
  
• C-v is bounded to yank, because full screen scroll (i.e. Page Down/Up) was barely used.
  
• M-q is bounded to previous-command in the Minibuffer mode. This command was bounded to M-p and you have to use right hand. Bounding to M-q can free your right hand.
  
• M-e is bounded to <return>. M-e was previously bounded to forward-sentence, barely used. So that you can do "Enter" by left hand.
  
• C-<tab> & C-S-<tab> are bounded to next/previous-window, so that you don't need C-x o to do so (o uses right hand).
  

读过不少博客就会发现, 作者的编辑器使用历史会影响此人在配置 Emacs 时的偏好, 特别是 key-binding. 譬如说, 如果此人之前用 Vim, 那么大概率会采用 evil 这款在 Emacs 里使用 Vim 键位的插件. 我之前用 Sublime Text, 没有 Vim 的历史包袱, 所以配置里 没有使用 evil, ivy, helm 等流行插件 (总觉得太庞大的插件污染了原生键位增加复杂性).

在 init-kbd.el 里我自定义了一些快捷键, 使得如 单行滚动浏览 以及 编译 等操作都可以 用左手来完成. 这里提及部分:

• 单行下滚绑定了 C-z, 上滚绑定了 M-z. 二者原来分别绑定的是 suspend-frame 和 zap-to-char, 前者实际上就是最小化到系统图标的意思, 都极不常用, 不用白不用;
  
• C-x C-v 绑定了半屏下滚, C-x M-v 绑定了半屏上滚. 半屏滚是用自己写的函数.
  
• 因为整屏滚用得少 (也即方向键的 Page Down/Up), 所以就把 C-v 绑定到 yank.
  
• 在 Minibuffer 模式里把绑定 M-q 绑定为 previous-command. 这个命令原来是绑定了 M-p, 必须使用右手, 而绑定 M-q 的话就可以用左手完成.
  
• 绑定 M-e 为 <return>. 它原来绑定的是 forward-sentence, 极不常用. 这样也可以用左手敲回车.
  
• C-<tab> 和 C-S-<tab> 分别绑定为 next/previous-window, 这样就可以不使用 C-x o (你需要右手敲 o).
  

The code is available on this repo.

Use C-h v to see a variable. Execute the following command to reset it.

(setq foo (eval (car (get 'foo 'standard-value))))

where the "execute" means, place the cursor at the end of the emacs-lisp's sexp, then C-x C-e.

Use C-h c or C-h k to see the information of a key bindings.

TikZ drawing is the most suitable example to illustrate how powerful it is. Example comes from Overleaf.

\begin{tikzpicture}
\draw[blue, very thick] (0,0) rectangle (3,2);
\draw[orange, ultra thick] (4,0) -- (6,0) -- (5.7,2) -- cycle;
\end{tikzpicture}

Use C-c C-x C-v to toggle image show.

The html file generated by Org mode is shown in the following. Replace the contents in head.html, preamble.html & postamble.html with yourself.

 1: <!-- head.html begins here (ends in line 7) -->
 2: <meta charset="UTF-8">
 3: <meta name="generator" content="Emacs 29.1, Org mode 9.6.6">
 4: <link rel="icon" type="image/png" href="/images/Cola.png">
 5: <link rel="stylesheet" href="/css/main.css">
 6: <link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
 7: <!-- head.html ends here (begins in line 1) -->
 8: <body>                                           <!-- body begins here (ends in line 39) -->
 9:   <div id="preamble" class="status">             <!-- preamble.html begins here (ends in line 20) -->
10:     <header class="header" itemscope itemtype="http://schema.org/WPHeader">
11:       Title
12:       <nav>
13:         <ul id="menu">
14:           <li><a href="/">Home</a></li>
15:           <li><a href="/research/">Research</a></li>
16:           <li><a href="/projects/">Personal Projects</a></li>
17:         </ul>
18:       </nav>
19:     </header>
20:   </div>                                         <!-- preamble.html ends here (begins in line 9) -->
21:   <div id="content" class="content">             <!-- contents begins here (ends in line 33) -->
22:     <h1 class="title">The title of the post</h1>
23:     <div id="table-of-contents" role="doc-toc">  <!-- TOC begins here (ends in line 31) -->
24:       <h2>Table of Contents</h2>
25:       <div id="text-table-of-contents" role="doc-toc">
26:         <ul>
27:           <li><a href="#第1节">第1节</a></li>
28:           <li><a href="#section-B">Section B</a></li>
29:         </ul>
30:       </div>
31:     </div>                                       <!-- TOC ends here (begins in line 23) -->
32:     <!-- main matter -->
33:   </div>                                         <!-- contents ends here (begins in line 21) -->
34:   <div id="postamble" class="status">            <!-- postamble.html begins here (ends in line 38) -->
35:     <footer>
36:       Powered by GNU Emacs 29.1 (Org mode 9.6.6)
37:     </footer>
38:   </div>                                         <!-- postamble.html ends here (begins in line 34) -->
39: </body>                                          <!-- body ends here (ends in line 8) -->

You can find some samples of these three files, from the html in ./public/ generated by Hexo. Nevertheless, I still recommend you to refer the html that generated by Org mode (e.g. shellcodes's) because most of the generated tags and classes are different.

Hexo uses hexo g, hexo s, hexo d to generate html, preview locally, and deploy to git. You can write your own Makefile by make g, make s, make d.

The equivalence of hexo g is emacs --script blog.el. The core contents of blog.el is the following, which would generate all Org files to html files at the same dir.

(package-initialize)
(require 'ox-html)
(require 'ox-publish)

(setq org-publish-project-alist
       '(("blog"
          :base-directory "."
          :publishing-directory "."
          :recursive t
          :publishing-function org-html-publish-to-html)))

(setq org-html-head      (with-temp-buffer (insert-file-contents "static/head.html")      (buffer-string))
      org-html-preamble  (with-temp-buffer (insert-file-contents "static/preamble.html")  (buffer-string))
      org-html-postamble (with-temp-buffer (insert-file-contents "static/postamble.html") (buffer-string)))

(add-to-list 'org-html-mathjax-options '(path "https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML"))

(org-publish-project "blog")

The equivalence of hexo s is python -m http.server -d ./, then preview the blow in your browser by http://localhost:8000/.

hexo d, "d" means "deploy". You can do this via scp, rsync, Emacs's Tramp etc.

The provided blog.el & Makefile are in the repo. blog.el is tailored to my dir tree and utilized some elisp techniques (thus it's not so simple at the first glance).

As stated before, the CSS files I used to DIY are

1. The CSS generated by Hexo's NexT.Pisces. It's huge, more than 2000 lines.
   
2. Worg's official "answer", approx 1000 lines, but the parts that only worth money are lines 74 to 110, which involves the config of sidebar TOC.
   

The sidebar TOC requires some js trick. Recall the layout, if you modify the generated html code, that put the codes of TOC to the nav tag after menu's ul (unordered list), its position is exactly correct!

So the task now turn to, how to shift the TOC part into the nav tag every time you generate the html files. ChatGPT taught me:

<script>
  var toc = document.getElementById('table-of-contents');  /* get TOC */
  document.querySelector('nav').appendChild(toc);          /* Append the TOC to the nav */
  toc.querySelector("h2").innerHTML = "<i class=\"fa fa-list fa-fw\"></i> TOC";  /* change title */
</script>

This is a js snippet, place it after the footer tags then every thing works. The third line is to change the TOC's name "Table of Contents" to three letters "TOC", which is exactly what you see in the top left.

There are still several facts should care:

1. In Org files, * represents h1, ** represents h2, and so on. However in the generated html files, h1 tag wraps the title of the blog (e.g. "Emacs Workspace: IDE + Yet Another Jupyter" is actually h1), while h2 tags wraps the chapters begin with *.
   
2. CSS's ul (unordered list), ol (ordered list) etc are called org-ul, org-ol etc in the html generated by Org mode.
   

There is a personal preference worth mentioned. The main matter of my blog is not so wide as NexT.Pisces theme. One reason is that, the default width is 60em in the variable org-html-style-default (use C-h v to view it), another reason is, this width is similar to the typesetting of an A4 PDF paper, so that reading my blog will give you almost the same experience as reading a PDF.

Though NexT.Pisces's CSS is huge (more than 2000 lines), but the core part I need is exactly 300 lines, and don't need any js.

Flycheck is ready to go-out-of-the-box (开箱即用) after you set the follows. Use C-c ! c to rerun it and C-c ! l to list errors.

(dolist (hook '(prog-mode-hook text-mode-hook))
  (add-hook hook 'flycheck-mode))

The global search path is configured in .emacs.d/'s file:

(setq flycheck-clang-include-path
      (list
       (expand-file-name "~/.local/include/")
       "/usr/share/verilator/include/"))

Paths like /usr/include/ and /usr/lib/gcc/.../include/ are automatically searched, so need not add.

The local search path is .dir-locals.el in your project dir. Its content is

((c-mode . ((flycheck-clang-include-path . ("/absolute/path/to/mini-ide/include"
                                            "/absolute/path/to/mini-ide/build")))))

After you set .dir-locals.el, do C-x x g to revert the opened c file.¹

Emacs's team also has Flymake. You'll dislike it after having a try. I assure you.

Company is ready to go-out-of-the-box after you set

(add-hook 'after-init-hook 'global-company-mode)

Projectile is ready to go-out-of-the-box after you set

(projectile-mode +1)
(define-key projectile-mode-map (kbd "C-c p") 'projectile-command-map)

Ibuffer-Projectile is used to group the buffers in the same project so that you can have a more nicer view in the buffer list. So you need an "indicator file" to mark that "this path is a project". Projectile has a built-in solution: just create an empty file .projectile in it. You can add many other "indicator files" in the following way:

(dolist (file '(".dir-locals.el" ".ccls" "compile_flags.el"))
  (add-to-list 'projectile-project-root-files-bottom-up file t))

29.4 Xref (GNU Emacs Manual)

Identifiers are also known as tags. An identifier is a name of a syntactical subunit of the program: a function, a subroutine, a method, a class, a data type, a macro, etc. In a programming language, each identifier is a symbol in the language's syntax. In a large programming project, it's vital to quickly find where an identifier is declared, defined & referenced. Emacs provides a unified interface to these capabilities — xref.

This task requires mode-specific knowledge, to search for identifiers, find references to identifiers, complete on identifiers, etc. xref delegates the mode-specific parts of its job to a backend provided by the mode. A backend can implement its capabilities in a variety of ways:

1. etags-like commands to generate TAGS file, or Semantic to generate a database. Major modes for languages supported by etags can use tags tables as basis for their backend. So using TAGS file as a backend has a huge drawback: you must update your TAGS timely.
   
2. Eglot or lsp-mode. The language server protocol. LSP does NOT introduce the concepts like "symbol table" or TAGS file, but use message protocol as a support backend.
   

A work-around is, for system headers, you can simply generate a TAGS file for them, which does not need to open lsp; while for the current project, open lsp to perform real-time analysis. Here is a basic idea on how to generate TAGS for system headers:

• C/C++ Development Environment for Emacs
  

TLDR: Emacs's built-in EDE is a white elephant (鸡肋). Write your own Makefile then M-x compile RET make is better.

ede is a sample project on how to write GNU make. cd to it and do:

mkdir build m4
autoreconf -i; cd build; ../configure; make all
make-clean.sh

automake: 2.4.1 Creating amhello-1.0.tar.gz 🚩
29.5 EDE (GNU Emacs Manual)
3. Quick Start (EDE)
EDE manual - GNU Project - Free Software Foundation (FSF)

Emacs provides a built-in EDE to help you generate configure.ac & Makefile.am, the two essential files for a typical GNU-make project. However, few body says EDE is convenient to use:
Does anyone use "EDE" (Emacs Development Environment)? If so, what do you like/dislike about it and how does your config look for it? : emacs

I was a long time EDE user, but basically had to give it up.

1. It's no longer maintained, so the bugs that are in there are staying in there.
   
2. It is difficult to set up and configure, compared with e.g. Treemacs + lsp-mode.
   

So there it is. EDE, CEDET, all that has been supplanted by newer and better things like LSP.

我自己使用 EDE 的体验是, 其文档 Quick Start 实际上做的只是这三连命令. 但凡有过一点写 configure.ac 和 Makefile.am 的经验的人, 都不会认为把这种可以自行高度定制化的任务外包给一个年久失修的项目去生成, 是简化了工作的, 甚至是安全的.
My experience on using EDE is, what its Quick Start talking about is nothing but the following commands. Anybody has experience on writing configure.ac & Makefile.am will NOT think that it's "simplified your life" (and even safe) to outsource such a highly customizable task to an outdated project.

autoreconf -f -i; ./configure; make -f Makefile all  # EDE's commands
autoreconf -i; cd build; ../configure; make all      # You can put the *.o to build/

As the title explains, LSP tools are encompassed, Eglot & lsp-mode are two of them. Readers should familiar that they are two competitors. I use Eglot.