GitHub Flavored Markdown Editor and Preview for TextMate2

Write and preview your Markdown files like a Boss! This bundle battle tested under M1, M2, M3 and M4 Mac Books :) Yes, TextMate still works on Sequoia!

Requirements

Ruby is shipped with macOS. Current builtin ruby version (macOS Sonoma) is 2.6.10, and 2.6.10p210 (macOS Sequoia). It’s better to use rbenv and set your TM_RUBY environment variable from TextMate!

rbenv which ruby
# /Users/vigo/.rbenv/versions/3.3.6/bin/ruby

If you have already installed rbenv or rvm, you’re good to go.

Install and Update

Make sure that TextMate is not running. Add TM_RUBY environment variable to TextMate:

$ defaults write com.macromates.TextMate environmentVariables \
    -array-add "{enabled = 1; value = \"$(rbenv which ruby)\"; name = \"TM_RUBY\"; }"

Now clone the repo:

$ cd ~/Library/Application\ Support/TextMate/Bundles/
$ git clone https://github.com/vigo/textmate2-gfm-preview.git GFM-Preview.tmbundle
$ cd GFM-Preview.tmbundle/Support/
$ bundle config set --local path 'vendor/bundle'
$ bundle

That’s it! Bundle installed successfully! You can follow updates via git pull time-to-time.

$ cd ~/Library/Application\ Support/TextMate/Bundles/GFM-Preview.tmbundle
$ git pull origin main

TextMate Environment Variables

You can define;

• TM_GFM_ZOOM_FACTOR: For zooming text.
• TM_MARKDOWN_MATHJAX: For Mathjax support.
• TM_MARKDOWN_MERMAID: For Mermaid support. (new!)
• TM_GFM_FONT: For custom font which is installed to your ~/Fonts
• TM_GFM_LINK_FONT_WEIGHT: Optional font-weight: css directive for a link tags.
• TM_GFM_LINK_TEXT_DECORATION: Optional text-decoration: css directive for a link tags.

variables from TextMate > Preferences > Variables for customizing extra features. Or do it from shell:

# assuming that, `OpenSans` font already installed on your ~/Library/Fonts

defaults write com.macromates.TextMate environmentVariables -array-add \
    '{enabled = 1; value = "100%"; name = "TM_GFM_ZOOM_FACTOR"; }' \
    '{enabled = 1; value = 1; name = "TM_MARKDOWN_MATHJAX"; }' \
    '{enabled = 1; value = 1; name = "TM_MARKDOWN_MERMAID"; }' \
    '{enabled = 1; value = "OpenSans"; name = "TM_GFM_FONT"; }' \
    '{enabled = 1; value = "500"; name = "TM_GFM_LINK_FONT_WEIGHT"; }' \
    '{enabled = 1; value = "underline"; name = "TM_GFM_LINK_TEXT_DECORATION"; }'

Example Settings

Zooming

Without zoom (default/standard)

With 150% zoom:

You name it! Make it 300% if you like to! Now you can hit ⌃ + ⌥ + ⌘ + p or kntrl + alt + cmd + p

Editor Features

With the power or Redcarpet and Rouge gems, we have some special features in markdown operation!

Shortcuts	Description
c + ⇥	Insert code block. There are lots of languages supported. Thanks to rouge gem. List of languages are here.
⌃ + C	Convert selection to inline code.
⌃ + H	Convert selection to highlighted text.
⌃ + S	Convert selection to strikethrough text.
⌘ + U	Convert selection to underlined text.
table + ⇥	Insert markdown table.
img + ⇥	Insert markdown image.

Features

Mermaid Support (new!)

Add TM_MARKDOWN_MERMAID variable and set it to 1. Example mermaid git graph:

```mermaid
gitGraph
    commit
    commit
    branch develop
    checkout develop
    commit
    commit
    checkout main
    merge develop
    commit
    commit
```

or

```mermaid
sequenceDiagram
    Alice->>John: Hello John, how are you?
    John-->>Alice: Great!
    Alice-)John: See you later!
```

Mermaid related configuration via env-vars:

• TM_MARKDOWN_MERMAID_SHOW_SEQUENCE_NUMBERS: true or false will (dis)allow sequence numbers on screen. (sequenceDiagram). Default value is false

Mathjax Support

Add TM_MARKDOWN_MATHJAX variable and set it to 1 for mathjax support. (TextMate > Preferences > Variables)

Example:

$ log\_232 = log\_22\^5 = 5 $

Strikethrough

You can strikethrough words.

You can ~~strikethrough~~ words.

Superscript

This is your 2^(nd) attempt.

This is your 2^(nd) attempt.

Underline

This is underlined but this is still italic

This is _underlined_ but this is still *italic*

Highlight

This is ==highlighted== text.

This is ==highlighted==

Quote

This is a "quote"

This is a "quote"

Footnotes

Click to jump footnote.¹

Fenced Code Blocks

```ruby
require 'redcarpet'
markdown = Redcarpet.new("Hello World!")
puts markdown.to_html
```

require 'redcarpet'
markdown = Redcarpet.new("Hello World!")
puts markdown.to_html

Tables: Example 1

| First Header  | Second Header |
| ------------- | ------------- |
| Content Cell  | Content Cell  |
| Content Cell  | Content Cell  |

Output:

First Header	Second Header
Content Cell	Content Cell
Content Cell	Content Cell

---

Tables: Example 2

| Name          | Description                 |
| ------------- | --------------------------- |
| Help          | ~~Display the~~ help window.|
| Close         | _Closes_ a window           |

Output:

Name	Description
Help	Display the help window.
Close	Closes a window

---

Tables: Example 3

| Left-Aligned  | Center Aligned  | Right Aligned |
| :------------ |:---------------:| -------------:|
| col 3 is      | some wordy text |         $1600 |
| col 2 is      | centered        |           $12 |
| zebra stripes | are neat        |            $1 |

Output:

Left-Aligned	Center Aligned	Right Aligned
col 3 is	some wordy text	$1600
col 2 is	centered	$12
zebra stripes	are neat	$1

---

Change Log

2022-10-04

• Add Mermaid renderer

2019-10-17

• Add bumpversion support

2018-11-21

• Update: Installation information, removed ruby version dependency

2018-11-02

• Fix latest Safari update Version 12.0.1 (13606.2.104.1.2)
• Version bump: 2.2.2

2018-10-18

• Version bump: 2.2.1
• Installation information update

2017-11-06

• Version bump: 2.2.0
• TM_GFM_LINK_FONT_WEIGHT and TM_GFM_LINK_TEXT_DECORATION environment variables are added.

2017-10-02

• Update: t + ⇥ (3 spaces for nested list)
• Fix: app.js remote image loading issue.

2017-09-29

• Update: table + ⇥
• Fix: README

2017-07-08

• Ruby lib gfm.rb re-written from scratch!
• Fixed: Live Preview!

2017-07-02

• Removed: Pygments
• New syntax highlighter: rouge
• Updated to Ruby 2.4.0
• Added: Front-Matter filter for Preview. Thanks to noniq for Markdown-Front-Matter
• Added: Lots of Markdown Snippets!

2017-01-08

• Fix: live preview.

2017-01-02

• Fix: Broken footnotes due to base href.
• New feature: Custom font-family via TM_GFM_FONT env-var.

2017-01-01

• Support for relative image src: ![alt](picture.png "title") looks for picture.png in current folder.

2016-10-04

• Fix zoom factor for TABLEs
• Automatic refresh for Preview (comes with TextMate version 2.0-beta.12.21) when you save file.

2016-09-14

• Added: Mathjax support.
• Added more redcarpet features: Strikethrough, Superscript, Underline, Highlight, Quote, Footnotes. Please preview this readme file via bundle. GitHub doesn’t support some of the features (highlight, superscript, underline, footnote etc...)

2016-04-25

• Added: TM_GFM_ZOOM_FACTOR for zoom options
• Auto-save! If you open an existing file and hit preview, you don’t need to save!

2016-03-20

• converted TM1 edition of this bundle to TM2
• fixed: You don’t need to save before preview!

---

Contribute

PR’s are very welcome!

1. fork (https://github.com/vigo/textmate2-gfm-preview/fork)
2. Create your branch (git checkout -b my-features)
3. commit yours (git commit -am 'added killer features')
4. push your branch (git push origin my-features)
5. Than create a new Pull Request!

---

Contributor(s)

• Uğur "vigo" Özyılmazel - Creator, maintainer

---

License

This project is licensed under MIT.

Footnotes

1. This is a footnote. ↩ ↩²