Markdown Live Preview
An online
markdown live previewer
Show archive.org snapshot
with GitHub Flavoured Markdown support.
Another online
markdown live previewer
Show archive.org snapshot
with GitHub Flavoured Markdown support.
An online
markdown live previewer
Show archive.org snapshot
without GitHub Flavoured Markdown support.
Related cards:
Instant Markdown previews from Vim
Live markdown previewer (with Github flavored syntax) for VIM.
Will open a preview in your browser and update automatically on each key press.
Preview Github-flavored Markdown from the bash with ianks/octodown
Preview what your markdown would look like on Github. Helpful e.g. when writing or extending a Readme for your gem or projects.
Installation
sudo apt-get install cmake libicu-dev # required for building native extensions
gem install octod...
SVGOMG allows optimizing SVGs with a live preview
There are many ways to optimize SVGs. Ideally, your build pipeline does that automatically for you (e.g. via postcss-svgo).
If you want to manually tweak an SVG, you can use SVGOMG which is an applicat...
Livereload + esbuild
Getting CSS (and JS) live reloading to work in a esbuild / Rails project is a bit of a hassle, but the following seems to work decently well.
We assume that you already use a standard "esbuild in Rails" setup, and have an esbuild watcher running ...
wmd - The Wysiwym Markdown Editor
WMD is a simple, lightweight HTML editor for blog comments, forum posts, and basic content management. You can add WMD to any textarea with one line of code. Add live preview with one line more. WMD works in nearly all modern browsers, and is now ...
Action Mailer Previews
Rails includes a way to see what an e-mail will look like.
Integration to RSpec
All you need to do is implement a preview-class in spec/mailers/previews/notifier_preview.rb:
class NotifierPreview < ActionMailer::Preview
def welco...
Do not forget mailer previews
When changing code in mailers, updating the corresponding mailer preview is easily forgotten.
Mailer previews can be tested like other code as well and I sometimes add the following test to test suites:
# Make sure to...
Live CSS / view reloading
Next time you have to do more than trivial CSS changes on a project, you probably want to have live CSS reloading, so every time you safe your css, the browser updates automatically. It's pretty easy to set up and will safe you a lot of time in th...
How to preview an image before uploading it
When building a form with a file select field, you may want to offer your users a live preview before they upload the file to the server.
HTML5 via jQuery
Luckily, HTML5 has simple support for this. Just create an [object URL](https://deve...
ActionMailer: Previewing mails directly in your email client
In Rails, we usually have a mailer setup like this:
class MyMailer < ActionMailer::Base
def newsletter
mail to: 'receiver@host.tld',
from: 'sender@host.tld',
subject: 'My mail'
end
end
If you want to preview you...