{"id":2469,"date":"2019-09-11T13:13:55","date_gmt":"2019-09-11T17:13:55","guid":{"rendered":"http:\/\/www.lios.ca\/?p=2469"},"modified":"2019-09-11T13:13:55","modified_gmt":"2019-09-11T17:13:55","slug":"how-to-insert-pretty-code-examples-in-madcap-flare","status":"publish","type":"post","link":"https:\/\/www.lios.ca\/en\/blogue\/how-to-insert-pretty-code-examples-in-madcap-flare\/","title":{"rendered":"How to insert (pretty) code examples in MadCap Flare"},"content":{"rendered":"

When it comes to your HTML output, it can be tricky to insert code that is highly readable, visually appealing, and up to software developers\u2019 expectations. Fortunately, we have an easy way to make that happen!<\/em><\/p>\n

They say that form follows function, but we all want our documentation to be eye-catching. If you work in the software industry, you probably know that code examples can sometimes look a little lackluster in MadCap Flare without any syntax highlighting. More importantly, it can be tough to format it the way software developers want it to look. What is a technical writer to do?<\/p>\n

I know, I\u2019ll just take pictures of my code!<\/h4>\n

Snapping screenshots of your perfectly formatted code may be a quick and easy way to get your point across. But what happens when users want to copy your examples and edit them for their own projects? The dazzling beauty of your formatting will quickly fade as the frustrated reader retypes all your code line by line. What\u2019s more, none of the code in your screenshots will turn up in searches, which may mean that fewer people see your work at all.<\/p>\n

I pasted my code as text instead, but it\u2019s a complete jumble.<\/h4>\n

Indeed. You never realize just how valuable line breaks, indents and syntax highlighting are until they\u2019re gone. Deciphering this kind of code makes for a good headache:
\n\"\"<\/p>\n

But don\u2019t panic! You can always paste your code into\u00a0<pre><code class=\"language-xxx\"><\/code><\/pre><\/code>\u00a0tags, which will at least preserve your indents and display your code in a simple monospace font:
\n\"\"<\/p>\n

The bad news is that you will either have to settle for plain old black font, or create custom styles for each font colour and apply them by hand. We don\u2019t know about you, but not many people have that kind of time.<\/p>\n

Please tell me there\u2019s a better solution for this.<\/h4>\n

Lucky for you, there is. Thanks to the folks over at Prism (and the makers of other syntax highlighting tools), you can download a lightweight syntax highlighting script that will make your dreams of colourful code come true:
\n\"\"<\/p>\n

Keen to give it a try? Just follow the steps below.<\/p>\n

Download Prism<\/h5>\n

The first order of business is to download Prism from the website:<\/p>\n

    \n
  1. Visit prismjs.com<\/a>.<\/li>\n
  2. Click the big DOWNLOAD<\/strong> button on the homepage.
    \n\"\"<\/li>\n
  3. Edit the download settings if you want to customize the colour theme or supported languages.
    \n\"\"<\/li>\n
  4. At the bottom of the page, click DOWNLOAD JS<\/strong> and DOWNLOAD CSS<\/strong>.
    \n\"\"<\/li>\n<\/ol>\n
    Set up Prism in Flare<\/h5>\n

    Once you have the files you need, it\u2019s time to set up your project to work with Prism:<\/p>\n

      \n
    1. In Flare, in the Content Explorer<\/strong>, right-click on the Resources<\/strong> folder and select New > Folder<\/strong>. Name this new folder Scripts<\/em>.
      \n\"\"<\/li>\n
    2. Save the .js file that you downloaded in the Scripts<\/strong> folder that you just created.<\/li>\n
    3. Save the .css file that you downloaded in your Stylesheets<\/strong> folder.<\/li>\n
    4. To ensure that your code will be formatted with Prism\u2019s syntax highlighting, you need to import the Prism CSS in your stylesheet. To do so, open Flare, right-click on the stylesheet associated with your target, and open it in the Internal Text Editor<\/strong>.
      \n\"\"<\/li>\n
    5. Enter @import url('prism.css');<\/code> at the top of your stylesheet. This ensures that the code will be formatted with Prism\u2019s syntax highlighting.
      \n\"\"<\/li>\n
    6. To ensure that the script will run on every page, you will need to call the Prism script in your master page. To do so, right-click on your master page and open it in the Internal Text Editor<\/strong>.
      \n\"\"<\/li>\n
    7. Enter\u00a0<script type=\"text\/javascript\" src=\"..\/Scripts\/prism.js\"><\/code> in the <head><\/code> section.
      \n\"\"<\/li>\n<\/ol>\n
      Insert code in your topics<\/h5>\n
        \n
      1. Open the topic where you want to add a code snippet.<\/li>\n
      2. Using the XML Editor<\/strong>, paste your code into the topic.<\/li>\n
      3. Click the \"\" icon that appears below your pasted code and select Paste Inline Text<\/strong>. This ensures that any special characters in your code (e.g. <<\/code>, ><\/code>, &<\/code>) are converted to HTML entities (e.g. &lt;<\/code>, &gt;<\/code>, &amp;<\/code>).\n

        Tip:<\/strong> If your code is in a language that does not use any special characters, such as JavaScript, you can paste your code directly into the Text Editor<\/strong> instead.<\/p>\n<\/li>\n

      4. Switch to the Text Editor<\/strong> and wrap your code in tags (replace \u201cxxx\u201d with the language of your code, such as \u201chtml\u201d or \u201ccss\u201d).
        \n\"\"<\/li>\n<\/ol>\n

        Last but not least, publish your project and admire your code snippet! You can now add code to your project wherever and whenever it is needed, without losing any of the formatting that you see in your code editor.<\/p>\n

        Tip:\u00a0<\/strong>To make the process even faster, you can create snippet templates in Flare for each code language. Here\u2019s one that we use:\"\"<\/p>\n","protected":false},"excerpt":{"rendered":"

        When it comes to your HTML output, it can be tricky to insert code that is highly readable, visually appealing, and up to software developers\u2019 expectations. Fortunately, we have an easy way to make that happen! They say that form follows function, but we all want our documentation to be eye-catching. If you work in […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[41,39],"tags":[],"class_list":["post-2469","post","type-post","status-publish","format-standard","hentry","category-madcap-flare","category-technical-writing-and-documentation"],"acf":[],"yoast_head":"\nHow to insert (pretty) code examples in MadCap Flare - Lios<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.lios.ca\/en\/blogue\/how-to-insert-pretty-code-examples-in-madcap-flare\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to insert (pretty) code examples in MadCap Flare - Lios\" \/>\n<meta property=\"og:description\" content=\"When it comes to your HTML output, it can be tricky to insert code that is highly readable, visually appealing, and up to software developers\u2019 expectations. Fortunately, we have an easy way to make that happen! They say that form follows function, but we all want our documentation to be eye-catching. If you work in […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.lios.ca\/en\/blogue\/how-to-insert-pretty-code-examples-in-madcap-flare\/\" \/>\n<meta property=\"og:site_name\" content=\"Lios\" \/>\n<meta property=\"article:published_time\" content=\"2019-09-11T17:13:55+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/www.lios.ca\/wp-content\/uploads\/2019\/08\/1en.png\" \/>\n<meta name=\"author\" content=\"Pascal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Pascal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.lios.ca\\\/en\\\/blogue\\\/how-to-insert-pretty-code-examples-in-madcap-flare\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.lios.ca\\\/en\\\/blogue\\\/how-to-insert-pretty-code-examples-in-madcap-flare\\\/\"},\"author\":{\"name\":\"Pascal\",\"@id\":\"https:\\\/\\\/www.lios.ca\\\/#\\\/schema\\\/person\\\/185bd226f300ea376b71556a3861a2d2\"},\"headline\":\"How to insert (pretty) code examples in MadCap Flare\",\"datePublished\":\"2019-09-11T17:13:55+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.lios.ca\\\/en\\\/blogue\\\/how-to-insert-pretty-code-examples-in-madcap-flare\\\/\"},\"wordCount\":777,\"image\":{\"@id\":\"https:\\\/\\\/www.lios.ca\\\/en\\\/blogue\\\/how-to-insert-pretty-code-examples-in-madcap-flare\\\/#primaryimage\"},\"thumbnailUrl\":\"http:\\\/\\\/www.lios.ca\\\/wp-content\\\/uploads\\\/2019\\\/08\\\/1en.png\",\"articleSection\":[\"MadCap Flare\",\"Technical writing and documentation\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.lios.ca\\\/en\\\/blogue\\\/how-to-insert-pretty-code-examples-in-madcap-flare\\\/\",\"url\":\"https:\\\/\\\/www.lios.ca\\\/en\\\/blogue\\\/how-to-insert-pretty-code-examples-in-madcap-flare\\\/\",\"name\":\"How to insert (pretty) code examples in MadCap Flare - Lios\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.lios.ca\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.lios.ca\\\/en\\\/blogue\\\/how-to-insert-pretty-code-examples-in-madcap-flare\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.lios.ca\\\/en\\\/blogue\\\/how-to-insert-pretty-code-examples-in-madcap-flare\\\/#primaryimage\"},\"thumbnailUrl\":\"http:\\\/\\\/www.lios.ca\\\/wp-content\\\/uploads\\\/2019\\\/08\\\/1en.png\",\"datePublished\":\"2019-09-11T17:13:55+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.lios.ca\\\/#\\\/schema\\\/person\\\/185bd226f300ea376b71556a3861a2d2\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.lios.ca\\\/en\\\/blogue\\\/how-to-insert-pretty-code-examples-in-madcap-flare\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.lios.ca\\\/en\\\/blogue\\\/how-to-insert-pretty-code-examples-in-madcap-flare\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.lios.ca\\\/en\\\/blogue\\\/how-to-insert-pretty-code-examples-in-madcap-flare\\\/#primaryimage\",\"url\":\"http:\\\/\\\/www.lios.ca\\\/wp-content\\\/uploads\\\/2019\\\/08\\\/1en.png\",\"contentUrl\":\"http:\\\/\\\/www.lios.ca\\\/wp-content\\\/uploads\\\/2019\\\/08\\\/1en.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.lios.ca\\\/en\\\/blogue\\\/how-to-insert-pretty-code-examples-in-madcap-flare\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Accueil\",\"item\":\"http:\\\/\\\/www.lios.ca\\\/en\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to insert (pretty) code examples in MadCap Flare\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.lios.ca\\\/#website\",\"url\":\"https:\\\/\\\/www.lios.ca\\\/\",\"name\":\"Lios\",\"description\":\"L'information \u00e0 l'oeuvre\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.lios.ca\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.lios.ca\\\/#\\\/schema\\\/person\\\/185bd226f300ea376b71556a3861a2d2\",\"name\":\"Pascal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/0b61a5ec5d50484aabc9949da35a378871871e11bf276aa4d242d1d5c3ad948a?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/0b61a5ec5d50484aabc9949da35a378871871e11bf276aa4d242d1d5c3ad948a?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/0b61a5ec5d50484aabc9949da35a378871871e11bf276aa4d242d1d5c3ad948a?s=96&d=mm&r=g\",\"caption\":\"Pascal\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to insert (pretty) code examples in MadCap Flare - Lios","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.lios.ca\/en\/blogue\/how-to-insert-pretty-code-examples-in-madcap-flare\/","og_locale":"en_US","og_type":"article","og_title":"How to insert (pretty) code examples in MadCap Flare - Lios","og_description":"When it comes to your HTML output, it can be tricky to insert code that is highly readable, visually appealing, and up to software developers\u2019 expectations. Fortunately, we have an easy way to make that happen! They say that form follows function, but we all want our documentation to be eye-catching. If you work in […]","og_url":"https:\/\/www.lios.ca\/en\/blogue\/how-to-insert-pretty-code-examples-in-madcap-flare\/","og_site_name":"Lios","article_published_time":"2019-09-11T17:13:55+00:00","og_image":[{"url":"http:\/\/www.lios.ca\/wp-content\/uploads\/2019\/08\/1en.png","type":"","width":"","height":""}],"author":"Pascal","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Pascal","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.lios.ca\/en\/blogue\/how-to-insert-pretty-code-examples-in-madcap-flare\/#article","isPartOf":{"@id":"https:\/\/www.lios.ca\/en\/blogue\/how-to-insert-pretty-code-examples-in-madcap-flare\/"},"author":{"name":"Pascal","@id":"https:\/\/www.lios.ca\/#\/schema\/person\/185bd226f300ea376b71556a3861a2d2"},"headline":"How to insert (pretty) code examples in MadCap Flare","datePublished":"2019-09-11T17:13:55+00:00","mainEntityOfPage":{"@id":"https:\/\/www.lios.ca\/en\/blogue\/how-to-insert-pretty-code-examples-in-madcap-flare\/"},"wordCount":777,"image":{"@id":"https:\/\/www.lios.ca\/en\/blogue\/how-to-insert-pretty-code-examples-in-madcap-flare\/#primaryimage"},"thumbnailUrl":"http:\/\/www.lios.ca\/wp-content\/uploads\/2019\/08\/1en.png","articleSection":["MadCap Flare","Technical writing and documentation"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.lios.ca\/en\/blogue\/how-to-insert-pretty-code-examples-in-madcap-flare\/","url":"https:\/\/www.lios.ca\/en\/blogue\/how-to-insert-pretty-code-examples-in-madcap-flare\/","name":"How to insert (pretty) code examples in MadCap Flare - Lios","isPartOf":{"@id":"https:\/\/www.lios.ca\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.lios.ca\/en\/blogue\/how-to-insert-pretty-code-examples-in-madcap-flare\/#primaryimage"},"image":{"@id":"https:\/\/www.lios.ca\/en\/blogue\/how-to-insert-pretty-code-examples-in-madcap-flare\/#primaryimage"},"thumbnailUrl":"http:\/\/www.lios.ca\/wp-content\/uploads\/2019\/08\/1en.png","datePublished":"2019-09-11T17:13:55+00:00","author":{"@id":"https:\/\/www.lios.ca\/#\/schema\/person\/185bd226f300ea376b71556a3861a2d2"},"breadcrumb":{"@id":"https:\/\/www.lios.ca\/en\/blogue\/how-to-insert-pretty-code-examples-in-madcap-flare\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.lios.ca\/en\/blogue\/how-to-insert-pretty-code-examples-in-madcap-flare\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.lios.ca\/en\/blogue\/how-to-insert-pretty-code-examples-in-madcap-flare\/#primaryimage","url":"http:\/\/www.lios.ca\/wp-content\/uploads\/2019\/08\/1en.png","contentUrl":"http:\/\/www.lios.ca\/wp-content\/uploads\/2019\/08\/1en.png"},{"@type":"BreadcrumbList","@id":"https:\/\/www.lios.ca\/en\/blogue\/how-to-insert-pretty-code-examples-in-madcap-flare\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Accueil","item":"http:\/\/www.lios.ca\/en\/"},{"@type":"ListItem","position":2,"name":"How to insert (pretty) code examples in MadCap Flare"}]},{"@type":"WebSite","@id":"https:\/\/www.lios.ca\/#website","url":"https:\/\/www.lios.ca\/","name":"Lios","description":"L'information \u00e0 l'oeuvre","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.lios.ca\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.lios.ca\/#\/schema\/person\/185bd226f300ea376b71556a3861a2d2","name":"Pascal","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/0b61a5ec5d50484aabc9949da35a378871871e11bf276aa4d242d1d5c3ad948a?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/0b61a5ec5d50484aabc9949da35a378871871e11bf276aa4d242d1d5c3ad948a?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/0b61a5ec5d50484aabc9949da35a378871871e11bf276aa4d242d1d5c3ad948a?s=96&d=mm&r=g","caption":"Pascal"}}]}},"_links":{"self":[{"href":"https:\/\/www.lios.ca\/en\/wp-json\/wp\/v2\/posts\/2469","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.lios.ca\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.lios.ca\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.lios.ca\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.lios.ca\/en\/wp-json\/wp\/v2\/comments?post=2469"}],"version-history":[{"count":27,"href":"https:\/\/www.lios.ca\/en\/wp-json\/wp\/v2\/posts\/2469\/revisions"}],"predecessor-version":[{"id":2552,"href":"https:\/\/www.lios.ca\/en\/wp-json\/wp\/v2\/posts\/2469\/revisions\/2552"}],"wp:attachment":[{"href":"https:\/\/www.lios.ca\/en\/wp-json\/wp\/v2\/media?parent=2469"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.lios.ca\/en\/wp-json\/wp\/v2\/categories?post=2469"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.lios.ca\/en\/wp-json\/wp\/v2\/tags?post=2469"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}