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.

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).
  

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.