Adds Syntax Highlighting & Hint for TiddlyWiki5 tiddlers (text/vnd.tiddlywiki) to the CodeMirror.

Overview

CodeMirror-Mode-TiddlyWiki5

Adds Syntax Highlighting for TiddlyWiki5 tiddlers (text/vnd.tiddlywiki) to the CodeMirror, along with some other useful editor addon (wikilink hint, macro hint, etc.). Now is under development.

为 TiddlyWiki 的 CodeMirror 编辑器添加 TiddlyWiki5(text/vnd.tiddlywiki)语法高亮,同时还有其他有用的编辑器扩展(如 Wiki 链接自动提示、宏提示等),以及可以打开的链接。现在正在开发中。

> English Readme <


插件说明

增加 CodeMirror 对 TiddlyWiki5 语法高亮的支持,所有 MIME 类型留空或者为text/vnd.tiddlywiki的 tiddler 都会有高亮。同时支持像VSCode那样在打字时实时进行代码补全提示+预览(目前仅实现了 WikiLink 补全),且不需要Ctrl+Space激活。

插件还在开发中,如有任何建议或者 bug 请直接提 Issue。

安装&编译

请首先安装最新版CodeMirror主插件和CodeMirror Autocomplete子插件(不然会报错)。

直接去Release下载CodeMirrorModeTiddlyWiki5-X.X.X.json,然后将其拖拽到你的 TiddlyWiki 中,或者在 TiddlyWiki 中导入之。

如果插件报错了,不必惊慌,因为插件不会对 TiddlyWiki 本体内容做修改,所以只需要卸载就能够消除问题,但保险起见还是建议先备份再安装

如果想 DIY 和编译,请直接运行make或者make build。请注意,被打包的是那几个xxx.min.jsxxx.min.css

功能介绍

高亮TiddlyWiki5语法,支持内嵌代码块和LaTeX的语法高亮

Default: default

Ayu-Dark: ayu-dark

TiddlyWiki: tiddlywiki

注意:这些主题有些是我自己装的,如感兴趣换主题,请阅读 TiddlyWiki 的 CodeMirror 的 README。

WikiLink实时补全提示+预览

wikilink-hint

在预览打开的情况下:

hint-preview

可点击的链接

wikilink-hint

  • 对于 macOS 用户,cmd + 鼠标左键 可以打开 tiddler 或者外部 url。
  • 对于非 macOS 用户,ctrl + 鼠标左键 可以打开 tiddler 或者外部 url。

其他功能正在开发中。

开发感想

在使用 TiddlyWiki 之后,一直苦于 TiddlyWiki5 语法没有高亮支持,写作体验不是很好。之前有也在网上找到一些相关的解决办法,例如在Google Group上面有人建议用 TiddlyWiki2 的语法进行 Hack,但是这种方法并不完美。

也有人编写了一个可用的 CodeMirror 的扩展版本TW5-CodeMirror-Plus,虽然是可用的,但是有两个问题:一个是语法高亮的内容有限,另一个是该插件直接基于 theme 而非 mode 进行开发,这就导致如果想要用 TW5 的高亮就必须舍弃其他语法高亮,并且无法自定义主题。所以最终还是打算自己写一个 :D

本插件一开始也是基于TW5-CodeMirror-Plus开发的,只不过魔改了很多,现在基本上是两个不同的插件了。

TODO List

  • 代码块内的语法高亮与缩进。
  • LaTeX 公式高亮与缩进。
  • 自动补全内部链接的 tiddler 名称。
  • 可点击的URL与WikiLink。
  • 补全提示的预览框。
  • 其他代码提示。
  • 代码错误检查。
  • 鼠标悬在 LaTeX 代码上方能够进行公式预览。
You might also like...

A React framework for building text editors.

A React framework for building text editors.

Draft.js Draft.js is a JavaScript rich text editor framework, built for React and backed by an immutable model. Extensible and Customizable: We provid

Jan 4, 2023

Open source rich text editor based on HTML5 and the progressive-enhancement approach. Uses a sophisticated security concept and aims to generate fully valid HTML5 markup by preventing unmaintainable tag soups and inline styles.

This project isn’t maintained anymore Please check out this fork. wysihtml5 0.3.0 wysihtml5 is an open source rich text editor based on HTML5 technolo

Jan 7, 2023

Popline is an HTML5 Rich-Text-Editor Toolbar

Popline is an HTML5 Rich-Text-Editor Toolbar

popline Popline is a non-intrusive WYSIWYG editor that shows up only after selecting a piece of text on the page, inspired by popclip. Usage Load jQue

Nov 4, 2022

A completely customizable framework for building rich text editors. (Currently in beta.)

A completely customizable framework for building rich text editors. (Currently in beta.)

A completely customizable framework for building rich text editors. Why? · Principles · Demo · Examples · Documentation · Contributing! Slate lets you

Dec 30, 2022

Open source rich text editor based on HTML5 and the progressive-enhancement approach. Uses a sophisticated security concept and aims to generate fully valid HTML5 markup by preventing unmaintainable tag soups and inline styles.

This project isn’t maintained anymore Please check out this fork. wysihtml5 0.3.0 wysihtml5 is an open source rich text editor based on HTML5 technolo

Dec 30, 2022

Collection of tools for building rich text editors.

psst we have great documentation at https://bangle.dev What is bangle.dev ? bangle.dev is a collection of components for building powerful editing exp

Dec 29, 2022

A powerful WYSIWYG rich text web editor by pure javascript

KothingEditor A powerful WYSIWYG rich text web editor by pure javascript Demo : kothing.github.io/editor The KothingEditor is a lightweight, flexible,

Dec 25, 2022

Typewriter is a simple, FOSS, Web-based text editor that aims to provide a simple and intuitive environment for you to write in.

Typewriter Typewriter is a simple, FOSS, Web-based text editor that aims to provide a simple and intuitive environment for you to write in. Features S

May 24, 2022

Override the rich text editor in Strapi admin with ToastUI Editor.

Override the rich text editor in Strapi admin with ToastUI Editor.

strapi-plugin-wysiwyg-tui-editor ⚠️ This is a strapi v4 plugin which does not support any earlier version! A Strapi plugin to replace the default rich

Dec 23, 2022
Releases(v0.0.6)
Owner
Ke Wang
I know nothing on this grand world.
Ke Wang
Obsidian plugin with options to customize the behavior of CodeMirror

Obsidian CodeMirror Options This plugin adds configurable options to customize the behavior of CodeMirror. Installation Manual Installation To manuall

null 145 Dec 31, 2022
A markdown editor using Electron, ReactJS, Vite, CodeMirror, and Remark

updated: Saturday, 5th February 2022 A modern looking application built with Electron-Vite-React ?? ✨ Markdown Editor Introduction This application s

Kryptonite 5 Sep 7, 2022
An extension that adds an "edit tags" button to every object on osm.org

OpenStreetMap Tags Editor This is a WebExtension that adds an "Edit Tags" button to all node, way, and relation pages on the osm.org website. The butt

Ilya Zverev 13 Dec 1, 2022
Simple rich text editor (contentEditable) for jQuery UI

Hallo - contentEditable for jQuery UI Hallo is a very simple in-place rich text editor for web pages. It uses jQuery UI and the HTML5 contentEditable

Henri Bergius 2.4k Dec 17, 2022
A modern, simple and elegant WYSIWYG rich text editor.

jQuery-Notebook A simple, clean and elegant WYSIWYG rich text editor for web aplications Note: Check out the fully functional demo and examples here.

Raphael Cruzeiro 1.7k Dec 12, 2022
Medium.com WYSIWYG editor clone. Uses contenteditable API to implement a rich text solution.

If you would be interested in helping to maintain one of the most successful WYSIWYG text editors on github, let us know! (See issue #1503) MediumEdit

yabwe 15.7k Jan 4, 2023
Tiny bootstrap-compatible WISWYG rich text editor

bootstrap-wysiwyg Important information for Github requests/issues Please do not submit issues/comments to this repo. Instead, submit it to https://gi

MindMup 5.6k Jan 3, 2023
HTML5 rich text editor. Try the demo integration at

Squire Squire is an HTML5 rich text editor, which provides powerful cross-browser normalisation in a flexible lightweight package (only 16.5KB of JS a

Neil Jenkins 4.4k Dec 28, 2022
The world's #1 JavaScript library for rich text editing. Available for React, Vue and Angular

TinyMCE TinyMCE is the world's most advanced open source core rich text editor. Trusted by millions of developers, and used by some of the world's lar

Tiny 12.4k Jan 4, 2023
A rich text editor for everyday writing

Trix A Rich Text Editor for Everyday Writing Compose beautifully formatted text in your web application. Trix is a WYSIWYG editor for writing messages

Basecamp 17.3k Jan 3, 2023