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 | |
//  | |
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); |
This comment has been minimized.
This comment has been minimized.
also centered image and made it smaller |
This comment has been minimized.
This comment has been minimized.
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. :) |
This comment has been minimized.
This comment has been minimized.
Thanks Wizmann, never saw this comment. Just changed to |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This comment has been minimized.
Added alt and title tags, which make sense