Home → Questions →

syntax coloring in preview, pdf

• Edit

jlundell

23 Dec, 2013 06:43 PM

My final output is pdf, and I'd like syntax coloring of code blocks. Is there a way to do that? My workaround is to output from Marked, but it'd be nicer to have syntax coloring in Preview and pdf export.

1. Support Staff 1 Posted by Fletcher on 23 Dec, 2013 06:46 PM

   

   You have to link to a syntax coloring javascript or other tool in your HTML header. The code blocks follow the GFM approach, so they will work with most javascript apps.

   The “cheat sheet” inside the app uses this, for example.

   FTP

   --
   Fletcher T. Penney
   Manager, Founder
   MultiMarkdown Software, LLC
   [email blocked]

   • Edit

2. 2 Posted by jlundell on 23 Dec, 2013 07:11 PM

   

   If I add this first line:

   HTML Header:

   then I see the code in preview in my header (via inspect element), but no coloring (fwiw, these are snippets of JSON marked as javascript, and do get colored by Marked). What am I missing here?

   • Edit

3. Support Staff 3 Posted by Fletcher on 23 Dec, 2013 07:15 PM

   

   Your message appears to have been truncated (there is nothing following the "HTML Header:".

   You might have to check with Brett to see which coloring javascript he is using??

   • Edit

4. 4 Posted by jlundell on 23 Dec, 2013 07:33 PM

   

   (my earlier reply was nominally plain text, but the html got absorbed anyway)

   HTML Header: <script src="http://yandex.st/highlightjs/7.5/highlight.min.js"></script>

   Brett appears to use CSS; everything in the pre block is tagged with an appropriate span & class.

   Let me back up, though: should I be able to see syntax coloring in the Composer preview, with appropriate HTML header content?

   • Edit

5. 5 Posted by jlundell on 23 Dec, 2013 07:37 PM

   

   Also: while Marked gives me syntax coloring, I'm really aiming at doing this all in Composer, mainly because I really like the editor-preview-export integration. (And it's a nicer mmd editor than BBEdit.)

   • Edit

6. Support Staff 6 Posted by Fletcher on 23 Dec, 2013 07:41 PM

   

   Yes, if you have the proper javascript, including the “start” commands, it works just fine:

   html header: <link rel="stylesheet" href="http://yandex.st/highlightjs/7.3/styles/default.min.css">
   <script src="http://yandex.st/highlightjs/7.3/highlight.min.js"></script>
   <script>hljs.initHighlightingOnLoad();</script>

   F-

   --
   Fletcher T. Penney
   Manager, Founder
   MultiMarkdown Software, LLC
   [email blocked]

   • Edit

7. 7 Posted by jlundell on 23 Dec, 2013 08:46 PM

   

   Bingo! (Modulo some escaped characters.) For the benefit of generations yet unborn, this as the first link of my .md gives me syntax coloring:

   html header: <link rel="stylesheet" href="http://yandex.st/highlightjs/7.5/styles/default.min.css">
   <script src="http://yandex.st/highlightjs/7.5/highlight.min.js"></script> 
   <script>hljs.initHighlightingOnLoad();</script>
   

   I've bumped it to v7.5, current as of now.

   One more question: can one put the html header in a Composer style sheet? Or mmd metadata in general? Does that even make sense?

   • Edit

8. Support Staff 8 Posted by Fletcher on 24 Dec, 2013 02:02 PM

   

   The MultiMarkdown Composer style sheets can contain CSS for the preview, but nothing else.

   Each document has its own metadata.

   If there is something, metadata or anything else, that you want to use across multiple files, the best way is to create a shortcut. You can do this with OS X, but I prefer TextExpander. I create a template for metadata that I can reuse across documents, applications, and devices (e.g. iOS/Mac/etc.).

   if you use the “%|” marker, you can instantly tab to the next “field”:

   Title: %|
   Date: December 24, 2013
   Recipient: %|
   Recipient Address: %|

   F-

   --
   Fletcher T. Penney
   Manager, Founder
   MultiMarkdown Software, LLC
   [email blocked]

   • Edit