{"id":2556,"date":"2019-10-02T13:53:17","date_gmt":"2019-10-02T17:53:17","guid":{"rendered":"http:\/\/www.lios.ca\/?p=2556"},"modified":"2019-10-02T13:53:17","modified_gmt":"2019-10-02T17:53:17","slug":"how-to-embed-codepen-and-jsfiddle-in-madcap-flare","status":"publish","type":"post","link":"https:\/\/www.lios.ca\/en\/blogue\/how-to-embed-codepen-and-jsfiddle-in-madcap-flare\/","title":{"rendered":"How to embed CodePen and JSFiddle in MadCap Flare"},"content":{"rendered":"

So you\u2019re already comfortable working with code examples in your documentation. Maybe you\u2019ve even read our article about inserting code snippets in Flare with Prism.js<\/a>. But now that you have a taste of the possibilities that can take your code from boring to beautiful, are you itching for new ways to step up your game as a software tech writer?<\/em><\/p>\n

Classic code snippets are a great solution for displaying a few lines of simple code, but are decidedly less useful when you need to show HTML, CSS, and JavaScript all together. Lines of code can add up quickly, and your user can easily find themselves scrolling into oblivion if you resort to using code snippet after code snippet.<\/p>\n

There\u2019s an elegant way to showcase multiple code languages in Flare?<\/h4>\n

You bet! You can pop your code into CodePen or JSFiddle and neatly package it up into an embeddable interactive widget. If you haven\u2019t yet used either of these tools (or the others like them), they are online development playgrounds that allow you to view your HTML, CSS and JS code simultaneously along with the end result:<\/p>\n

\"\"<\/p>\n

Not only are these neat tools to use for your own coding online, but embedding your Pens and Fiddles directly into Flare can really amp up your documentation. Whether your users are new to coding or are programming masters, this dynamic style of presentation can really boost their understanding (and it looks pretty snazzy, too).<\/p>\n

I\u2019m sold! But should I use CodePen, or JSFiddle?<\/h4>\n

When it comes down to nuts and bolts, both tools are very similar. If you don\u2019t yet have experience with either one, your best bet is to try both of them out and see which UI you prefer. One major difference is that CodePen runs your code automatically, whereas JSFiddle requires you to press a button. The rest mostly comes down to aesthetics and personal preference.<\/p>\n

If you feel adventurous, you can try your hand at other similar tools \u2014 CodePen and JSFiddle are some of the more popular options, but other choices exist.<\/p>\n

Let\u2019s get started. How do I embed my code from CodePen?<\/h4>\n

Just follow these steps:<\/p>\n

    \n
  1. Visit codepen.io<\/a>.<\/li>\n
  2. Log in to your existing CodePen account, or create a new one by clicking Sign Up<\/strong>.
    \n\"\"<\/li>\n
  3. In the CREATE<\/strong> section of the sidebar, click Pen<\/strong> to create a new Pen.
    \n\"\"<\/li>\n
  4. In the page that opens, enter your HTML, CSS and\/or JS code. Your code will run automatically, and you will be able to see the result in real time.
    \n\"\"<\/li>\n
  5. Once you are done monkeying with your code, click Save<\/strong>.<\/li>\n
  6. To get the code you need to embed your Pen, click Embed<\/strong> in the bottom right corner.
    \n\"\"<\/li>\n
  7. Edit the settings, if desired.
    \n\"\"<\/p>\n

    Tip:<\/strong> If you have a Pro account with CodePen, you can check Make code editable<\/strong> to allow others to play around with your code and see the results. This not only increases the cool factor of your documentation, but also makes developers very happy!<\/p>\n<\/li>\n

  8. In the Copy & Paste Code<\/strong> section, make sure the HTML<\/strong> tab is selected.
    \n\"\"<\/li>\n
  9. Copy the code.<\/li>\n
  10. In MadCap Flare, open the topic where you want to embed your Pen and view it in the Text Editor<\/strong>.
    \n\"\"<\/li>\n
  11. Paste the code, and don\u2019t panic when Flare warns you that the line containing the <script><\/code> tag contains an unexpected token. This happens because the async<\/code> attribute must take a value to be considered valid XHTML.
    \n\"\"<\/li>\n
  12. To fix the warning, replace <script async src=<\/code> with <script async=\"async\" src=<\/code>.
    \n\"\"<\/li>\n
  13. Save your changes, publish your project, and admire your embedded Pen!
    \n\"\"<\/li>\n<\/ol>\n

    How do I embed my code from JSFiddle?<\/h4>\n

    We\u2019ll walk you through it step by step:<\/p>\n

      \n
    1. Visit jsfiddle.net<\/a>.\n

      Tip:<\/strong> If you sign into an existing JSFiddle profile or create one, you will be able to save your finished Fiddle to your account and delete it in the future. That said, it won\u2019t be necessary for our purposes, as long as you are okay with making your Fiddle public.<\/p>\n<\/li>\n

    2. In the page that opens, enter your HTML, CSS and\/or JS code.
      \n\"\"<\/li>\n
    3. To try running your code, click Run<\/strong>.
      \n\"\"<\/li>\n
    4. Once you have finished crafting your code, click Save<\/strong>. In the bubble that pops up, read the warnings and click Save fiddle<\/strong>.
      \n\"\"<\/li>\n
    5. Refresh the page.<\/li>\n
    6. Click Embed<\/strong> to display the code for embedding your Fiddle.
      \n\"\"<\/li>\n
    7. Edit the settings, if desired.
      \n\"\"<\/li>\n
    8. In the Embed snippet<\/strong> section, click Prefer iframe?<\/strong> (this format cooperates better with MadCap Flare).
      \n\"\"<\/li>\n
    9. Copy the code.
      \n\"\"<\/li>\n
    10. In MadCap Flare, open the topic where you want to embed your Fiddle and view it in the Text Editor<\/strong>.
      \n\"\"<\/li>\n
    11. Paste the code, and don\u2019t stress when Flare complains that the line containing the <iframe><\/code> tag contains an unexpected token.
      \n\"\"<\/li>\n
    12. Delete both the allowfullscreen<\/code> and allowpaymentrequest<\/code> attributes. To make a long story short, Flare doesn\u2019t play well with these attributes and they aren\u2019t necessary for your Fiddle to work. In addition to getting rid of the pesky warning, this will tidy up your code.
      \n\"\"<\/li>\n
    13. Save your changes, publish your project, and admire your embedded Fiddle!
      \n\"\"<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"

      So you\u2019re already comfortable working with code examples in your documentation. Maybe you\u2019ve even read our article about inserting code snippets in Flare with Prism.js. But now that you have a taste of the possibilities that can take your code from boring to beautiful, are you itching for new ways to step up your game […]<\/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-2556","post","type-post","status-publish","format-standard","hentry","category-madcap-flare","category-technical-writing-and-documentation"],"acf":[],"yoast_head":"\nHow to embed CodePen and JSFiddle 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-embed-codepen-and-jsfiddle-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 embed CodePen and JSFiddle in MadCap Flare - Lios\" \/>\n<meta property=\"og:description\" content=\"So you\u2019re already comfortable working with code examples in your documentation. Maybe you\u2019ve even read our article about inserting code snippets in Flare with Prism.js. But now that you have a taste of the possibilities that can take your code from boring to beautiful, are you itching for new ways to step up your game […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.lios.ca\/en\/blogue\/how-to-embed-codepen-and-jsfiddle-in-madcap-flare\/\" \/>\n<meta property=\"og:site_name\" content=\"Lios\" \/>\n<meta property=\"article:published_time\" content=\"2019-10-02T17:53:17+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/www.lios.ca\/wp-content\/uploads\/2019\/09\/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-embed-codepen-and-jsfiddle-in-madcap-flare\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.lios.ca\\\/en\\\/blogue\\\/how-to-embed-codepen-and-jsfiddle-in-madcap-flare\\\/\"},\"author\":{\"name\":\"Pascal\",\"@id\":\"https:\\\/\\\/www.lios.ca\\\/#\\\/schema\\\/person\\\/185bd226f300ea376b71556a3861a2d2\"},\"headline\":\"How to embed CodePen and JSFiddle in MadCap Flare\",\"datePublished\":\"2019-10-02T17:53:17+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.lios.ca\\\/en\\\/blogue\\\/how-to-embed-codepen-and-jsfiddle-in-madcap-flare\\\/\"},\"wordCount\":847,\"image\":{\"@id\":\"https:\\\/\\\/www.lios.ca\\\/en\\\/blogue\\\/how-to-embed-codepen-and-jsfiddle-in-madcap-flare\\\/#primaryimage\"},\"thumbnailUrl\":\"http:\\\/\\\/www.lios.ca\\\/wp-content\\\/uploads\\\/2019\\\/09\\\/1en.png\",\"articleSection\":[\"MadCap Flare\",\"Technical writing and documentation\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.lios.ca\\\/en\\\/blogue\\\/how-to-embed-codepen-and-jsfiddle-in-madcap-flare\\\/\",\"url\":\"https:\\\/\\\/www.lios.ca\\\/en\\\/blogue\\\/how-to-embed-codepen-and-jsfiddle-in-madcap-flare\\\/\",\"name\":\"How to embed CodePen and JSFiddle in MadCap Flare - Lios\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.lios.ca\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.lios.ca\\\/en\\\/blogue\\\/how-to-embed-codepen-and-jsfiddle-in-madcap-flare\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.lios.ca\\\/en\\\/blogue\\\/how-to-embed-codepen-and-jsfiddle-in-madcap-flare\\\/#primaryimage\"},\"thumbnailUrl\":\"http:\\\/\\\/www.lios.ca\\\/wp-content\\\/uploads\\\/2019\\\/09\\\/1en.png\",\"datePublished\":\"2019-10-02T17:53:17+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.lios.ca\\\/#\\\/schema\\\/person\\\/185bd226f300ea376b71556a3861a2d2\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.lios.ca\\\/en\\\/blogue\\\/how-to-embed-codepen-and-jsfiddle-in-madcap-flare\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.lios.ca\\\/en\\\/blogue\\\/how-to-embed-codepen-and-jsfiddle-in-madcap-flare\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.lios.ca\\\/en\\\/blogue\\\/how-to-embed-codepen-and-jsfiddle-in-madcap-flare\\\/#primaryimage\",\"url\":\"http:\\\/\\\/www.lios.ca\\\/wp-content\\\/uploads\\\/2019\\\/09\\\/1en.png\",\"contentUrl\":\"http:\\\/\\\/www.lios.ca\\\/wp-content\\\/uploads\\\/2019\\\/09\\\/1en.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.lios.ca\\\/en\\\/blogue\\\/how-to-embed-codepen-and-jsfiddle-in-madcap-flare\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Accueil\",\"item\":\"http:\\\/\\\/www.lios.ca\\\/en\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to embed CodePen and JSFiddle 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 embed CodePen and JSFiddle 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-embed-codepen-and-jsfiddle-in-madcap-flare\/","og_locale":"en_US","og_type":"article","og_title":"How to embed CodePen and JSFiddle in MadCap Flare - Lios","og_description":"So you\u2019re already comfortable working with code examples in your documentation. Maybe you\u2019ve even read our article about inserting code snippets in Flare with Prism.js. But now that you have a taste of the possibilities that can take your code from boring to beautiful, are you itching for new ways to step up your game […]","og_url":"https:\/\/www.lios.ca\/en\/blogue\/how-to-embed-codepen-and-jsfiddle-in-madcap-flare\/","og_site_name":"Lios","article_published_time":"2019-10-02T17:53:17+00:00","og_image":[{"url":"http:\/\/www.lios.ca\/wp-content\/uploads\/2019\/09\/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-embed-codepen-and-jsfiddle-in-madcap-flare\/#article","isPartOf":{"@id":"https:\/\/www.lios.ca\/en\/blogue\/how-to-embed-codepen-and-jsfiddle-in-madcap-flare\/"},"author":{"name":"Pascal","@id":"https:\/\/www.lios.ca\/#\/schema\/person\/185bd226f300ea376b71556a3861a2d2"},"headline":"How to embed CodePen and JSFiddle in MadCap Flare","datePublished":"2019-10-02T17:53:17+00:00","mainEntityOfPage":{"@id":"https:\/\/www.lios.ca\/en\/blogue\/how-to-embed-codepen-and-jsfiddle-in-madcap-flare\/"},"wordCount":847,"image":{"@id":"https:\/\/www.lios.ca\/en\/blogue\/how-to-embed-codepen-and-jsfiddle-in-madcap-flare\/#primaryimage"},"thumbnailUrl":"http:\/\/www.lios.ca\/wp-content\/uploads\/2019\/09\/1en.png","articleSection":["MadCap Flare","Technical writing and documentation"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.lios.ca\/en\/blogue\/how-to-embed-codepen-and-jsfiddle-in-madcap-flare\/","url":"https:\/\/www.lios.ca\/en\/blogue\/how-to-embed-codepen-and-jsfiddle-in-madcap-flare\/","name":"How to embed CodePen and JSFiddle in MadCap Flare - Lios","isPartOf":{"@id":"https:\/\/www.lios.ca\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.lios.ca\/en\/blogue\/how-to-embed-codepen-and-jsfiddle-in-madcap-flare\/#primaryimage"},"image":{"@id":"https:\/\/www.lios.ca\/en\/blogue\/how-to-embed-codepen-and-jsfiddle-in-madcap-flare\/#primaryimage"},"thumbnailUrl":"http:\/\/www.lios.ca\/wp-content\/uploads\/2019\/09\/1en.png","datePublished":"2019-10-02T17:53:17+00:00","author":{"@id":"https:\/\/www.lios.ca\/#\/schema\/person\/185bd226f300ea376b71556a3861a2d2"},"breadcrumb":{"@id":"https:\/\/www.lios.ca\/en\/blogue\/how-to-embed-codepen-and-jsfiddle-in-madcap-flare\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.lios.ca\/en\/blogue\/how-to-embed-codepen-and-jsfiddle-in-madcap-flare\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.lios.ca\/en\/blogue\/how-to-embed-codepen-and-jsfiddle-in-madcap-flare\/#primaryimage","url":"http:\/\/www.lios.ca\/wp-content\/uploads\/2019\/09\/1en.png","contentUrl":"http:\/\/www.lios.ca\/wp-content\/uploads\/2019\/09\/1en.png"},{"@type":"BreadcrumbList","@id":"https:\/\/www.lios.ca\/en\/blogue\/how-to-embed-codepen-and-jsfiddle-in-madcap-flare\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Accueil","item":"http:\/\/www.lios.ca\/en\/"},{"@type":"ListItem","position":2,"name":"How to embed CodePen and JSFiddle 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\/2556","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=2556"}],"version-history":[{"count":13,"href":"https:\/\/www.lios.ca\/en\/wp-json\/wp\/v2\/posts\/2556\/revisions"}],"predecessor-version":[{"id":2630,"href":"https:\/\/www.lios.ca\/en\/wp-json\/wp\/v2\/posts\/2556\/revisions\/2630"}],"wp:attachment":[{"href":"https:\/\/www.lios.ca\/en\/wp-json\/wp\/v2\/media?parent=2556"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.lios.ca\/en\/wp-json\/wp\/v2\/categories?post=2556"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.lios.ca\/en\/wp-json\/wp\/v2\/tags?post=2556"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}