2025-10-22

.gitattributes

在仓库根新建或追加 .gitattributes：

content/*.md merge=union

这行配置告诉 Git：遇到 content/*.md 冲突时，尽量合并为并集（两边都保留）

张小龙的微博/饭否

张小龙公开访谈

还好是张小龙开发了微信，如此巨大的用户量，如此克制的 App，在 25 年，已经很少有了。我日常使用的应用中，小宇宙是其中一个。

不敢想象在微信尚未奠定根基，如果让网易与电信的易信赢了，米聊赢了（MIUI 实在是太多广告了），或者是腾讯内部的其他两个赛马产品赢了，可能都不会有现在的微信做的好。

时至今日，骚扰短信骚扰电话还一直干扰正常的生活，而运营商毫无反思改正的迹象。而在微信平台上，就很难有让我印象深刻的骚扰发生。

不过还是希望公众号平台能尽快改善一下编辑器的功能，实在是太难用了。

其他

由于栈溢出，计算机可能产生非预期的结果。但至少是一致的。

shadcnui Block

软件设计师

为什么鱼不存在

这个教授终其一生所做的各种研究，在几十年过后却被人们发现完全是无用功。

你当下所做的一切你认为有意义的，非常重要的事情。许多年过后可能都会被视为徒劳无功的一个笑话。

乔布斯的遗憾

但是乔布斯不无遗憾的意识到，这些工具的力量恐怕无法与 Bob Dylan 的音乐相比，也无法与 Disney 的白雪公主相比。

100 年后，还会有孩子看着《海底总动员》露出笑容，但是 100 年后，还会有谁记得 iPod、iPad？

Scripod

https://scripod.com/

一个类似 Podwise 的 AI 播客，目前还没有看到需要收费的地方，不知道后续的盈利模式会是什么样的。

UI 设计非常优秀，而且内容更新很快。

image-20251022154312786

煮米饭

Typora 的技术栈

Front-End Framework and UI Design

Typora does not use a large front-end framework like Vue or React. Instead, it relies on standard web technologies (HTML5, CSS3, JavaScript) with lightweight libraries. For example, Typora includes jQuery for certain DOM manipulations and uses Exoskeleton (a minimalist Backbone.js fork) to structure its UI components . This choice keeps the application lean and focused, as opposed to embedding an entire MVC framework. Typora’s UI is styled with CSS (including custom themes via user-provided CSS), and even basic components like dialog boxes or menus are built with web markup (it bundles Bootstrap CSS for some baseline styling ). This minimalist approach gives Typora a native feel while still using web tech under the hood.

Cross-Platform Desktop Engine (Electron)

Typora is implemented as a desktop application using Electron . Electron provides a Chromium-based rendering engine and Node.js environment, allowing Typora’s web UI to run as a native app on Windows, macOS, and Linux. This explains Typora’s consistent look-and-feel across platforms and its ability to access system APIs (file system, menus, etc.) through Node. The Electron runtime means Typora essentially runs a dedicated Chrome browser instance for the app. Using Electron, the developers could leverage web development tools and libraries while packaging Typora for multiple OSes easily. (Typora’s acknowledgements explicitly include Electron’s license , confirming it as the underlying engine.)

Markdown Parsing and Rendering**

For converting Markdown to formatted output, Typora uses a fast, robust Markdown library. While the exact parser isn’t explicitly named by Typora’s developers, it likely employs a CommonMark/GFM-compliant library such as markdown-it (or possibly marked). In fact, Typora bundles the markdown-it-emoji plugin , which strongly suggests it uses markdown-it as the core parser (markdown-it is a popular JS Markdown engine that supports plugins for GFM extensions like emoji, footnotes, etc.). Typora supports GitHub Flavored Markdown (GFM) features (tables, task lists, strikethrough, tables of contents, diagrams, etc.), indicating that its parser was chosen for full GFM compliance . The parser is integrated into Typora’s “What You See Is What You Mean” editing engine – as you type, Typora parses the Markdown text and immediately renders it to formatted HTML in the same view . This live parsing happens behind the scenes to achieve Typora’s seamless preview. Typora likely has custom rendering logic layered on the parser: for example, it can preserve certain Markdown syntax invisibly (like the brackets around a link) until you edit that element. In summary, the Markdown conversion is handled by an efficient library (with extensions), enabling Typora’s core feature of instantaneous, accurate preview.

Syntax Highlighting in Code Blocks

For source code blocks (fenced code ``` sections) Typora uses CodeMirror – an in-browser code editor library – to render and highlight code within the document . Each code fence in Typora is essentially an embedded CodeMirror instance, which provides syntax coloring for around 100 programming languages out-of-the-box . The Typora theme CSS applies a special class (cm-s-inner) so that code blocks adopt a CodeMirror theme consistent with the editor’s look . By using CodeMirror, Typora ensures that code snippets are not just styled statically but are also editable with proper indentation and cursor behavior. This is a clever reuse of a mature component: rather than implementing a custom syntax highlighter, Typora delegates to CodeMirror’s proven highlighting engine (the app bundles CodeMirror’s scripts and styles ). For inline code (the code spans) and other markdown syntax, Typora simply applies styling via CSS, but for fenced blocks it leverages CodeMirror’s powerful highlighting. This choice provides a consistent editing experience — when you click into a code block in Typora, it feels like a mini code editor within the document.

Build and Packaging Tools

While Typora’s exact build process isn’t documented, it being an Electron app suggests use of common web bundling tools. Typora’s development likely involved module bundlers or task runners such as Webpack or Gulp to compile its source code, manage assets, and package them into the Electron app structure. The presence of many Node.js dependencies (as seen in its acknowledgements) indicates a typical Node-based build. For example, Typora includes libraries like fs-extra, lowdb, etc., which would have been installed via npm and bundled into the app . It also uses Electron’s packaging capabilities (and perhaps Electron-builder) to generate installers for each OS. In short, Typora’s build system revolves around the Node/Electron ecosystem – HTML/JS/CSS code is bundled (likely minified) into the Electron app ASAR package. The packaging tools ensure that Typora’s cross-platform distribution is seamless, handling native modules and OS-specific tweaks. (For instance, Typora includes WinSparkle on Windows for auto-updates , integrated during the build.) Although specifics aren’t public, it’s reasonable to assume a standard web app build pipeline adapted for Electron.

File System Access and Storage

As a desktop Markdown editor, Typora interacts directly with the user’s file system to open and save files. Thanks to Electron (Node.js), Typora can use Node’s fs module; indeed, it bundles fs-extra (a Node library extending fs) for convenient file operations . This allows Typora to read/write Markdown files, create directories (e.g. for images or attachments), and watch for external file changes. Typora also uses node-pathwatcher (from the Atom editor) or similar to monitor file changes on disk – so if a file is edited outside Typora, it can prompt to reload. For storing user preferences (settings, recent files, etc.), Typora embeds a lightweight database. It notably includes lowdb, a tiny JSON-based database . Lowdb lets Typora persist data (in a JSON file) without a heavy DBMS; likely things like window state, preference toggles, or the user’s custom snippets are stored this way. No large local database engine is used – since Markdown files themselves are just text, there’s no need for something like SQLite to manage notes. In summary, Typora uses direct file system access (via Node) for document files, and a JSON file for miscellaneous app state. This approach plays to Electron’s strengths and keeps user data accessible (and easily syncable via services like Dropbox if needed).

Architectural Design and Notable Features

One of Typora’s most laudable design choices is its WYSIWYG Markdown editing paradigm – or as the Typora team calls it, “What You See Is What You Mean.” In practical terms, Typora removes the split-screen preview; the editor is the preview . It achieves this by dynamically hiding Markdown syntax and rendering the formatted content in place. For example, when you type an image syntax , Typora immediately displays the actual image in the document, not the raw code. This is implemented by leveraging the contenteditable DOM: the document is an HTML representation of your Markdown, and Typora overlays special handling for interactions. Libraries like Rangy (for handling text ranges/selections in contenteditable) are included in Typora , indicating it manages cursor movement and text insertion carefully in the rendered view. When you edit formatted text (say, make a word bold), Typora momentarily shows the Markdown syntax (the ** for bold) or opens an input UI, so you can change it, then reverts to rendered form. This seamless switching is powered by continuously parsing the Markdown in the background and updating the DOM. Typora optimizes these updates using a DOM diff/patch library (Morphdom is bundled ), which allows it to update only the changed portion of the document without reloading the entire view – preserving your cursor position and preventing flicker.

Another architectural note is that Typora is largely a closed-source app (aside from the open-source libraries it uses). It does not support plug-ins or third-party extensions, which means its functionality is built-in but not extensible . This design trade-off keeps the editor simple and focused (no risk of unstable plugins), though it limits customization compared to editors like VSCode or Obsidian. Typora instead allows customization via themes and CSS, letting users adjust appearance but not core behavior. Overall, Typora’s architecture is a mix of web contenteditable tricks, carefully integrated libraries, and custom logic – all geared toward making Markdown editing feel intuitive. The result is an editor that feels as fluid as a rich-text word processor, yet maintains 100% compatibility with plain Markdown files.

Alternative Technologies for a Similar Markdown Editor

If one were to develop a Typora-like Markdown editor today, there are numerous open-source components and frameworks that could replicate or even improve upon Typora’s tech stack. Below are key areas of the stack and popular alternatives for each:

In summary, plenty of open-source tools can help create a Typora-like experience. You could use a Vue or React front-end with a ProseMirror-based editor (via TipTap or Milkdown) to handle WYSIWYG Markdown editing, markdown-it or Remark to parse and serialize Markdown, and embed Highlight.js/Prism for code styling. Package it with Electron or a lighter alternative like Tauri, and you have a cross-platform Markdown editor. Indeed, projects like Mark Text (Electron + Vue + a custom Markdown engine) and Milkdown (ProseMirror + Remark) illustrate these approaches in action . By mixing and matching these components, developers can create a modern Markdown editor that rivals Typora, while leveraging the strengths of open-source software. The ecosystem in 2025 is rich – making it an exciting time to build (or enhance) a Markdown editor with all the UX finesse that Typora introduced to the world.

Sources: The analysis above is based on Typora’s official documentation and support pages, third-party reverse engineering reports, and comparisons with similar editors. Key references include Typora’s support knowledge base (for code block handling and included libraries) , the Typora acknowledgements listing third-party components (confirming use of CodeMirror, jQuery, etc.) , a SegmentFault Q&A about Typora’s early tech stack , and insights from open-source projects Milkdown and Mark Text that offer clues to building such an editor . These illustrate the technologies in Typora and the viable alternatives available for each part of the stack.