https://github.com/vigo/textmate2-gfm-preview
GitHub Flavored Markdown Preview for TextMate 2
https://github.com/vigo/textmate2-gfm-preview
gfm markdown markdown-editor textmate
Last synced: 5 months ago
JSON representation
GitHub Flavored Markdown Preview for TextMate 2
- Host: GitHub
- URL: https://github.com/vigo/textmate2-gfm-preview
- Owner: vigo
- License: mit
- Created: 2016-03-20T12:27:01.000Z (over 9 years ago)
- Default Branch: main
- Last Pushed: 2024-12-05T15:14:38.000Z (10 months ago)
- Last Synced: 2025-03-31T13:04:48.856Z (7 months ago)
- Topics: gfm, markdown, markdown-editor, textmate
- Language: CSS
- Size: 452 KB
- Stars: 13
- Watchers: 2
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE.txt
- Support: Support/.gitignore
Awesome Lists containing this project
README
# 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!
```bash
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:
```bash
$ defaults write com.macromates.TextMate environmentVariables \
-array-add "{enabled = 1; value = \"$(rbenv which ruby)\"; name = \"TM_RUBY\"; }"
```
Now clone the repo:
```bash
$ 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.
```bash
$ 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](https://mermaid-js.github.io/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:
```bash
# 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][rouge-list].
⌃ + 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.[^1]
[^1]: This is a footnote.
Click to jump footnote.[^1]
[^1]: This is a footnote.
### Fenced Code Blocks
```ruby
require 'redcarpet'
markdown = Redcarpet.new("Hello World!")
puts markdown.to_html
```
```ruby
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][noniq] for [Markdown-Front-Matter][markdown-fm-bundle]
* 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: `` 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][vigo] - Creator, maintainer
***
## License
This project is licensed under MIT.
[vigo]: http://ugur.ozyilmazel.com "Official Homepage"
[ln-01]: https://github.com/vigo/textmate1-github-gfm-preview
[noniq]: https://github.com/noniq
[markdown-fm-bundle]: https://github.com/noniq/Markdown-Front-Matter.tmbundle/blob/master/Support/strip_front_matter
[rouge-list]: https://github.com/jneen/rouge/wiki/List-of-supported-languages-and-lexers