CSS support for the markdown preview

DEVONthink Feedback
1

I like that Devonthink supports markdown. But, i find it troublesome that the current preview doesn’t mark block quotes distinctively. Notes exported from Skim via the markdown format could put us into trouble (plagiarism) if the formatting cannot mark the quotes distinctively.

I converted my Markdown notes in Devonthink to RTF; all the texts appear flat. There is no difference between the quoted and the written material. This is bad; even dangerous.

Please: either support some stylesheet (CSS) or add some clear marker of a block quote in the existing preview.
Adding something like this could do the trick: ```

blockquote {
border-left: 4px solid #dddddd;
padding: 0 15px;
color: #777777;
}


Good rendering: 
[img]https://snag.gy/nDMZz1.jpg[/img]

Devonthink: 
[img]https://snag.gy/VSTfar.jpg[/img]
2

You can add that to your Markdown files now.

3

How can I add that?

I am displaying the same file inside Devonthink and typora. Above, the Typora has marked the quote clearly while the Devonthink display doesn’t. How can I mark my text?

4

This is the Markdown and the rendered Markdown.

Screen Shot 2017-02-11 at 12.07.21 PM.png
Screen Shot 2017-02-11 at 12.07.21 PM.png1145×620 46.8 KB

5

That is something. Thank you.

It would have been better if that template can be embedded universally, though. It would be unbearable to write the style on every markdown file I wrote (exported): in thousands.

6

You can make whatever templates you wish. Create a file, any kind – RTF, plain, markdown, etc. Make it look how you wish, with embedded CSS for example. Use File > Export > As Template …, and save your template in Templates.noindex (which will be the first folder that opens) or a subfolder you create for your personal files.

When you want to use the template, click Data > New from Template…, choose your template, and you’ll get a new file based on that. You could add a keyboard shortcut to your template (using System Preferences) if you wish.

Hopefully that will make life a little less unbearable.

7

Thank you Korm. That indeed makes it easier to create new markdown files with the template.

Any way of modifying the default Markdown preview would still be very much appreciated: I already have thousands of Markdown files that I want to convert to RTF to drag to Tinderbox.

8

This is a simplistic tool that can help. It adds text to the beginning of a markdown file.

  1. Create a block of CSS styles you like – e.g., test this in a markdown file until you are satisfied
  2. Copy the text of those styles
  3. Select the markdown files you want to add the styles to
  4. Run the script (assuming you have compiled and saved it somewhere in DEVONthink’s scripts folders at ~/Library/Application Support/DEVONthink Pro 2/Scripts)
  5. You will be prompted at the beginning of the run to paste the text you copied in step 2
use AppleScript version "2.4" -- Yosemite (10.10) or later
use scripting additions

(*
	Add styles or other text to the beginning  markdown files
	korm 20170211
*)

property version : "1.0"

tell application id "DNtp"
	
	repeat
		set theStyles to display name editor info "Paste your style(s) here:"
		if theStyles is not "" then exit repeat
	end repeat
	
	set theStyles to theStyles & return & return
	
	set theSelection to the selection as list
	repeat with thisItem in theSelection
		if the kind of thisItem is "Markdown" then
			set the plain text of thisItem to theStyles & the plain text of thisItem
		end if
	end repeat
end tell

PLEASE TEST. I have no idea what your data are and cannot test this process. MAKE BACKUP COPIES before proceeding. DO NOT CHANGE ALL 1000 FILES in one pass. Break the work down. THERE IS NO ERROR TRAPPING and I cannot stop the script if it goes wrong. THERE IS NO UNDO – so backup your data.

9

Thank you korm.

10

Korm, one more question. I was thinking to embed the CSS into the Skim template so that the future exports would have the CSS.

My original Skim export template is this:

<$notes.@arraySortedByPageIndexAndBounds>
 > <$string?>

<$string/>

</$string?>
<$text?>
<$text/>

</$text?>

</$notes.@arraySortedByPageIndexAndBounds>

it puts the “>” before every highlighted text to mark it as quotation.

Now, I am putting the CSS into the template:

<style type ="text/css">
body {margin:20px;}
blockquote {
	font-style: italic;
	border-left: 5px solid;
	margin-left: 2em;
	padding-left: 1em;
	color: #777777;
}
</style>

<$notes.@arraySortedByPageIndexAndBounds>
 > <$string?>

<$string/>

</$string?>
<$text?>
<$text/>

</$text?>

</$notes.@arraySortedByPageIndexAndBounds>

The new template is generally a success, except one problem: The “>” marker I put in the original template is getting duplicated.
Here is my new markdown file:

Do you know why the marker gets duplicated?

(I should send this question to Skim developers; but, yah, if you know how to fix it: would settle it).

11

Ok, I get it now. it is working fine.

Thank you.