Create a gist now

Instantly share code, notes, and snippets.

workflowy-with-image.js
// ==UserScript==
// @name Workflowy markdown tags with images -> images
// @namespace http://tampermonkey.net/
// @version 0.1
// @description try to take over the world!
// @author You
// @match https://workflowy.com/*
// @grant none
// ==/UserScript==
/* jshint -W097 */
'use strict';
// you can just use markdown images like
// ![what](http://i.imgur.com/R72rW81.jpg)
function do_parseImg() {
$(this).nextAll(".content-img").remove();
var lines = $(this).text().split("\n");
var img_re = /^\!\[(.*)\]\((.+)\)$/;
for (var i = 0; i < lines.length; i++) {
var line = lines[i].trim();
var img = line.match(img_re);
if (img === null) {
continue;
}
// console.log(i, img[1]);
// NOTE sure why this isn't working
// if ($(this)[0] != document.activeElement) { return; }
$(this).after('<div class="content-img" style="text-align: left"><img src="' + img[2] + '" alt="' + img[1] + '" title="' + img[1] + '" style="max-width: 400px"/></div>')
}
}
function parseImg() {
$("div.notes div.content").live("click keyup", do_parseImg);
$("div.notes div.content").each(do_parseImg);
};
$(window).bind("load hashchange", parseImg);
@drosenstark
Owner

Added alt and title tags, which make sense

@drosenstark
Owner

also centered image and made it smaller

@Wizmann
Wizmann commented Dec 29, 2015

Great!

But I suppose the style of image width should be control by the property "max-width" rather than the "width" property with a magic number.

:)

@drosenstark
Owner

Thanks Wizmann, never saw this comment. Just changed to max-width per your suggestion, much better idea!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment