<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="github-markdown.css">
	.markdown-body {
		box-sizing: border-box;
		min-width: 200px;
		max-width: 980px;
		margin: 0 auto;
		padding: 45px;

	@media (max-width: 767px) {
		.markdown-body {
			padding: 15px;
<article class="markdown-body">	
	<h1><a href="javascript:(function()%7Bjavascript%3A(function%20()%7Bdocument.getElementsByTagName('head')%5B0%5D.appendChild(document.createElement('script')).src%3D'https%3A%2F%2Fcdn.jsdelivr.net%2Fgh%2FSiddharthShyniben%2Fbookmarklets%40latest%2Ftextarea-enhancer.js%3F'%2BMath.random()%3B%7D())%7D)()">The textarea enhancer</a></h1>

Want improved textareas with
- Automatic extra character insertion? (type `'` and get `''`)
- Real Tab characters inserted when you type `Tab`?
- Snippets?

Then you came to the right place!

The `.js` file here enhances every textarea in the vicinity. You can use it as a bookmarklet. Just drag the title of this page to your bookmarks bar and you are good to go

If you want to customize the snippets, just fork [this](https://gist.github.com/SiddharthShyniben/37421a053d530163caef39880f479ae1) gist, edit the snipmap object with:
let snipmap = {
  // ... other stuff
  'yoursnippet': 'yourexpansion'

And then edit the bookmarklet to include your fork instead of the original one. Or you can just comment on the gist with snippet ideas. I don't have any ideas.
If you want to know how I made this, check out [this post]()
View Compiled

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/4.0.0/github-markdown.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.