2017-07-03 13:43:14 +02:00
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "utf-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< meta http-equiv = "X-UA-Compatible" content = "IE=edge" >
2017-08-07 23:20:49 +02:00
< link rel = "canonical" href = "https://thepaciellogroup.github.io/infusion/patterns/coding/code-blocks/" >
2017-09-29 09:45:37 +02:00
< link rel = "apple-touch-icon" sizes = "57x57" href = "https://thepaciellogroup.github.io/infusion/images/apple-touch-icon-57x57.png" >
< link rel = "apple-touch-icon" sizes = "60x60" href = "https://thepaciellogroup.github.io/infusion/images/apple-touch-icon-60x60.png" >
< link rel = "apple-touch-icon" sizes = "72x72" href = "https://thepaciellogroup.github.io/infusion/images/apple-touch-icon-72x72.png" >
< link rel = "apple-touch-icon" sizes = "76x76" href = "https://thepaciellogroup.github.io/infusion/images/apple-touch-icon-76x76.png" >
< link rel = "apple-touch-icon" sizes = "114x114" href = "https://thepaciellogroup.github.io/infusion/images/apple-touch-icon-114x114.png" >
< link rel = "apple-touch-icon" sizes = "120x120" href = "https://thepaciellogroup.github.io/infusion/images/apple-touch-icon-120x120.png" >
< link rel = "apple-touch-icon" sizes = "144x144" href = "https://thepaciellogroup.github.io/infusion/images/apple-touch-icon-144x144.png" >
< link rel = "apple-touch-icon" sizes = "152x152" href = "https://thepaciellogroup.github.io/infusion/images/apple-touch-icon-152x152.png" >
< link rel = "apple-touch-icon" sizes = "180x180" href = "https://thepaciellogroup.github.io/infusion/images/apple-touch-icon-180x180.png" >
2017-08-07 23:20:49 +02:00
< link rel = "icon" type = "image/png" sizes = "192x192" href = "https://thepaciellogroup.github.io/infusion/images/android-icon-192x192.png" >
< link rel = "icon" type = "image/png" sizes = "32x32" href = "https://thepaciellogroup.github.io/infusion/images/favicon-32x32.png" >
< link rel = "icon" type = "image/png" sizes = "96x96" href = "https://thepaciellogroup.github.io/infusion/images/favicon-96x96.png" >
< link rel = "icon" type = "image/png" sizes = "16x16" href = "https://thepaciellogroup.github.io/infusion/images/favicon-16x16.png" >
2017-07-04 12:46:56 +02:00
< meta name = "msapplication-TileColor" content = "#ffffff" >
2017-08-14 18:56:50 +02:00
< meta name = "msapplication-TileImage" content = "https://thepaciellogroup.github.io/infusion/images/ms-icon-144x144.png" >
2017-07-04 12:46:56 +02:00
< meta name = "theme-color" content = "#ffffff" >
2017-08-01 19:18:28 +02:00
< link href = "https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel = "stylesheet" media = "none" onload = "this.media='all';" >
2017-09-05 15:59:57 +02:00
< link rel = "stylesheet" href = "https://thepaciellogroup.github.io/infusion/css/prism.css" media = "none" onload = "this.media='all';" >
2017-08-07 23:20:49 +02:00
< link rel = "stylesheet" type = "text/css" href = "https://thepaciellogroup.github.io/infusion/css/styles.css" >
2017-08-17 18:21:19 +02:00
< style id = "inverter" media = "none" >
html { filter: invert(100%) }
* { background-color: inherit }
img:not([src*=".svg"]), .colors, iframe, .demo-container { filter: invert(100%) }
< / style >
2017-07-03 13:43:14 +02:00
< title >
Code blocks | Infusion
< / title >
2017-08-01 16:08:15 +02:00
2017-07-03 13:43:14 +02:00
< / head >
< body >
2017-07-29 11:18:45 +02:00
< a href = "#main" > skip to content< / a >
2017-07-03 13:43:14 +02:00
< svg style = "display: none" >
2017-07-23 13:16:54 +02:00
< symbol id = "bookmark" viewBox = "0 0 40 50" >
2017-07-03 13:43:14 +02:00
< g transform = "translate(2266 3206.2)" >
< path style = "stroke:currentColor;stroke-width:3.2637;fill:none" d = "m-2262.2-3203.4-.2331 42.195 16.319-16.318 16.318 16.318.2331-42.428z" / >
< / g >
< / symbol >
2017-07-23 13:16:54 +02:00
< symbol id = "w3c" viewBox = "0 0 127.09899 67.763" >
2017-07-03 13:43:14 +02:00
< text font-size = "83" style = "font-size:83px;font-family:Trebuchet;letter-spacing:-12;fill-opacity:0" letter-spacing = "-12" y = "67.609352" x = "-26.782778" > W3C< / text >
< text font-size = "83" style = "font-size:83px;font-weight:bold;font-family:Trebuchet;fill-opacity:0" y = "67.609352" x = "153.21722" font-weight = "bold" > SVG< / text >
2017-07-28 15:44:56 +02:00
< path style = "fill:currentColor;image-rendering:optimizeQuality;shape-rendering:geometricPrecision" d = "m33.695.377 12.062 41.016 12.067-41.016h8.731l-19.968 67.386h-.831l-12.48-41.759-12.479 41.759h-.832l-19.965-67.386h8.736l12.061 41.016 8.154-27.618-3.993-13.397h8.737z" / >
< path style = "fill:currentColor;image-rendering:optimizeQuality;shape-rendering:geometricPrecision" d = "m91.355 46.132c0 6.104-1.624 11.234-4.862 15.394-3.248 4.158-7.45 6.237-12.607 6.237-3.882 0-7.263-1.238-10.148-3.702-2.885-2.47-5.02-5.812-6.406-10.022l6.82-2.829c1.001 2.552 2.317 4.562 3.953 6.028 1.636 1.469 3.56 2.207 5.781 2.207 2.329 0 4.3-1.306 5.909-3.911 1.609-2.606 2.411-5.738 2.411-9.401 0-4.049-.861-7.179-2.582-9.399-1.995-2.604-5.129-3.912-9.397-3.912h-3.327v-3.991l11.646-20.133h-14.062l-3.911 6.655h-2.493v-14.976h32.441v4.075l-12.31 21.217c4.324 1.385 7.596 3.911 9.815 7.571 2.22 3.659 3.329 7.953 3.329 12.892z" / >
< path style = "fill:currentColor;image-rendering:optimizeQuality;shape-rendering:geometricPrecision" d = "m125.21 0 1.414 8.6-5.008 9.583s-1.924-4.064-5.117-6.314c-2.693-1.899-4.447-2.309-7.186-1.746-3.527.73-7.516 4.938-9.258 10.13-2.084 6.21-2.104 9.218-2.178 11.978-.115 4.428.58 7.043.58 7.043s-3.04-5.626-3.011-13.866c.018-5.882.947-11.218 3.666-16.479 2.404-4.627 5.954-7.404 9.114-7.728 3.264-.343 5.848 1.229 7.841 2.938 2.089 1.788 4.213 5.698 4.213 5.698l4.94-9.837z" / >
< path style = "fill:currentColor;image-rendering:optimizeQuality;shape-rendering:geometricPrecision" d = "m125.82 48.674s-2.208 3.957-3.589 5.48c-1.379 1.524-3.849 4.209-6.896 5.555-3.049 1.343-4.646 1.598-7.661 1.306-3.01-.29-5.807-2.032-6.786-2.764-.979-.722-3.486-2.864-4.897-4.854-1.42-2-3.634-5.995-3.634-5.995s1.233 4.001 2.007 5.699c.442.977 1.81 3.965 3.749 6.572 1.805 2.425 5.315 6.604 10.652 7.545 5.336.945 9.002-1.449 9.907-2.031.907-.578 2.819-2.178 4.032-3.475 1.264-1.351 2.459-3.079 3.116-4.108.487-.758 1.276-2.286 1.276-2.286l-1.276-6.644z" / >
2017-07-13 20:05:53 +02:00
< / symbol >
2017-07-03 13:43:14 +02:00
2017-07-23 13:16:54 +02:00
< symbol id = "tag" viewBox = "0 0 177.16535 177.16535" >
2017-07-03 13:43:14 +02:00
< g transform = "translate(0 -875.2)" >
2017-07-28 15:44:56 +02:00
< path style = "fill-rule:evenodd;stroke-width:0;fill:currentColor" d = "m159.9 894.3-68.79 8.5872-75.42 77.336 61.931 60.397 75.429-76.565 6.8495-69.755zm-31.412 31.835a10.813 10.813 0 0 1 1.8443 2.247 10.813 10.813 0 0 1 -3.5174 14.872l-.0445.0275a10.813 10.813 0 0 1 -14.86 -3.5714 10.813 10.813 0 0 1 3.5563 -14.863 10.813 10.813 0 0 1 13.022 1.2884z" / >
2017-07-03 13:43:14 +02:00
< / g >
< / symbol >
2017-07-23 13:16:54 +02:00
< symbol id = "balloon" viewBox = "0 0 141.73228 177.16535" >
2017-07-03 13:43:14 +02:00
< g transform = "translate(0 -875.2)" >
< g >
2017-07-28 15:44:56 +02:00
< path style = "fill:currentColor" d = "m68.156 882.83-.88753 1.4269c-4.9564 7.9666-6.3764 17.321-5.6731 37.378.36584 10.437 1.1246 23.51 1.6874 29.062.38895 3.8372 3.8278 32.454 4.6105 38.459 4.6694-.24176 9.2946.2879 14.377 1.481 1.2359-3.2937 5.2496-13.088 8.886-21.623 6.249-14.668 8.4128-21.264 10.253-31.252 1.2464-6.7626 1.6341-12.156 1.4204-19.764-.36325-12.93-2.1234-19.487-6.9377-25.843-2.0833-2.7507-6.9865-7.6112-7.9127-7.8436-.79716-.20019-6.6946-1.0922-6.7755-1.0248-.02213.0182-5.0006-.41858-7.5248-.22808l-2.149-.22808h-3.3738z" / >
< path style = "fill:currentColor" d = "m61.915 883.28-3.2484.4497c-1.7863.24724-3.5182.53481-3.8494.63994-2.4751.33811-4.7267.86957-6.7777 1.5696-.28598 0-1.0254.20146-2.3695.58589-5.0418 1.4418-6.6374 2.2604-8.2567 4.2364-6.281 7.6657-11.457 18.43-12.932 26.891-1.4667 8.4111.71353 22.583 5.0764 32.996 3.8064 9.0852 13.569 25.149 22.801 37.517 1.3741 1.841 2.1708 2.9286 2.4712 3.5792 3.5437-1.1699 6.8496-1.9336 10.082-2.3263-1.3569-5.7831-4.6968-21.86-6.8361-33.002-.92884-4.8368-2.4692-14.322-3.2452-19.991-.68557-5.0083-.77707-6.9534-.74159-15.791.04316-10.803.41822-16.162 1.5026-21.503 1.4593-5.9026 3.3494-11.077 6.3247-15.852z" / >
< path style = "fill:currentColor" d = "m94.499 885.78c-.10214-.0109-.13691 0-.0907.0409.16033.13489 1.329 1.0675 2.5976 2.0723 6.7003 5.307 11.273 14.568 12.658 25.638.52519 4.1949.24765 14.361-.5059 18.523-2.4775 13.684-9.7807 32.345-20.944 53.519l-3.0559 5.7971c2.8082.76579 5.7915 1.727 8.9926 2.8441 11.562-11.691 18.349-19.678 24.129-28.394 7.8992-11.913 11.132-20.234 12.24-31.518.98442-10.02-1.5579-20.876-6.7799-28.959-.2758-.4269-.57803-.86856-.89617-1.3166-3.247-6.13-9.752-12.053-21.264-16.131-2.3687-.86369-6.3657-2.0433-7.0802-2.1166z" / >
< path style = "fill:currentColor" d = "m32.52 892.22c-.20090-.13016-1.4606.81389-3.9132 2.7457-11.486 9.0476-17.632 24.186-16.078 39.61.79699 7.9138 2.4066 13.505 5.9184 20.562 5.8577 11.77 14.749 23.219 30.087 38.74.05838.059.12188.1244.18052.1838 1.3166-.5556 2.5965-1.0618 3.8429-1.5199-.66408-.32448-1.4608-1.3297-3.8116-4.4602-5.0951-6.785-8.7512-11.962-13.051-18.486-5.1379-7.7948-5.0097-7.5894-8.0586-13.054-6.2097-11.13-8.2674-17.725-8.6014-27.563-.21552-6.3494.13041-9.2733 1.775-14.987 2.1832-7.5849 3.9273-10.986 9.2693-18.07 1.7839-2.3656 2.6418-3.57 2.4409-3.7003z" / >
< path style = "fill:currentColor" d = "m69.133 992.37c-6.2405.0309-12.635.76718-19.554 2.5706 4.6956 4.7759 9.935 10.258 12.05 12.625l4.1272 4.6202h11.493l3.964-4.4516c2.0962-2.3541 7.4804-7.9845 12.201-12.768-8.378-1.4975-16.207-2.6353-24.281-2.5955z" / >
< rect style = "stroke-width:0;fill:currentColor" ry = "2.0328" height = "27.746" width = "22.766" y = "1017.7" x = "60.201" / >
2017-07-03 13:43:14 +02:00
< / g >
< / g >
< / symbol >
2017-07-05 11:30:01 +02:00
2017-07-23 13:16:54 +02:00
< symbol id = "info" viewBox = "0 0 41.667 41.667" >
2017-07-05 11:30:01 +02:00
< g transform = "translate(-37.035 -1004.6)" >
< path style = "stroke-linejoin:round;stroke:currentColor;stroke-linecap:round;stroke-width:3.728;fill:none" d = "m76.25 1030.2a18.968 18.968 0 0 1 -23.037 13.709 18.968 18.968 0 0 1 -13.738 -23.019 18.968 18.968 0 0 1 23.001 -13.768 18.968 18.968 0 0 1 13.798 22.984" / >
< g transform = "matrix(1.1146 0 0 1.1146 -26.276 -124.92)" >
< path style = "stroke:currentColor;stroke-linecap:round;stroke-width:3.728;fill:none" d = "m75.491 1039.5v-8.7472" / >
< path style = "stroke-width:0;fill:currentColor" transform = "scale(-1)" d = "m-73.193-1024.5a2.3719 2.3719 0 0 1 -2.8807 1.7142 2.3719 2.3719 0 0 1 -1.718 -2.8785 2.3719 2.3719 0 0 1 2.8763 -1.7217 2.3719 2.3719 0 0 1 1.7254 2.8741" / >
< / g >
< / g >
2017-07-13 20:05:53 +02:00
< / symbol >
2017-07-05 11:30:01 +02:00
2017-07-23 13:16:54 +02:00
< symbol id = "warning" viewBox = "0 0 48.430474 41.646302" >
2017-07-13 20:05:53 +02:00
< g transform = "translate(-1.1273 -1010.2)" >
< path style = "stroke-linejoin:round;stroke:currentColor;stroke-linecap:round;stroke-width:4.151;fill:none" d = "m25.343 1012.3-22.14 37.496h44.28z" / >
< path style = "stroke:currentColor;stroke-linecap:round;stroke-width:4.1512;fill:none" d = "m25.54 1027.7v8.7472" / >
< path style = "stroke-width:0;fill:currentColor" d = "m27.839 1042.8a2.3719 2.3719 0 0 1 -2.8807 1.7143 2.3719 2.3719 0 0 1 -1.718 -2.8785 2.3719 2.3719 0 0 1 2.8763 -1.7217 2.3719 2.3719 0 0 1 1.7254 2.8741" / >
< / g >
< / symbol >
2017-07-23 13:16:54 +02:00
< symbol id = "menu" viewBox = "0 0 50 50" >
2017-08-12 10:14:05 +02:00
< rect style = "stroke-width:0;fill:currentColor" height = "10" width = "50" y = "0" x = "0" / >
< rect style = "stroke-width:0;fill:currentColor" height = "10" width = "50" y = "20" x = "0" / >
< rect style = "stroke-width:0;fill:currentColor" height = "10" width = "50" y = "40" x = "0" / >
< / symbol >
2017-07-27 13:00:25 +02:00
2017-08-12 10:14:05 +02:00
< symbol id = "link" viewBox = "0 0 50 50" >
< g transform = "translate(0 -1002.4)" >
< g transform = "matrix(.095670 0 0 .095670 2.3233 1004.9)" >
< g >
< path style = "stroke-width:0;fill:currentColor" d = "m452.84 192.9-128.65 128.65c-35.535 35.54-93.108 35.54-128.65 0l-42.881-42.886 42.881-42.876 42.884 42.876c11.845 11.822 31.064 11.846 42.886 0l128.64-128.64c11.816-11.831 11.816-31.066 0-42.9l-42.881-42.881c-11.822-11.814-31.064-11.814-42.887 0l-45.928 45.936c-21.292-12.531-45.491-17.905-69.449-16.291l72.501-72.526c35.535-35.521 93.136-35.521 128.64 0l42.886 42.881c35.535 35.523 35.535 93.141-.001 128.66zm-254.28 168.51-45.903 45.9c-11.845 11.846-31.064 11.817-42.881 0l-42.884-42.881c-11.845-11.821-11.845-31.041 0-42.886l128.65-128.65c11.819-11.814 31.069-11.814 42.884 0l42.886 42.886 42.876-42.886-42.876-42.881c-35.54-35.521-93.113-35.521-128.65 0l-128.65 128.64c-35.538 35.545-35.538 93.146 0 128.65l42.883 42.882c35.51 35.54 93.11 35.54 128.65 0l72.496-72.499c-23.956 1.597-48.092-3.784-69.474-16.283z" / >
< / g >
< / g >
2017-07-27 13:00:25 +02:00
< / g >
2017-08-12 10:14:05 +02:00
< / symbol >
2017-07-30 11:57:22 +02:00
2017-08-12 10:14:05 +02:00
< symbol id = "doc" viewBox = "0 0 35 45" >
< g transform = "translate(-147.53 -539.83)" >
< path style = "stroke:currentColor;stroke-width:2.4501;fill:none" d = "m149.38 542.67v39.194h31.354v-39.194z" / >
< g style = "stroke-width:25" transform = "matrix(.098003 0 0 .098003 133.69 525.96)" >
< path d = "m220 252.36h200" style = "stroke:currentColor;stroke-width:25;fill:none" / >
< path style = "stroke:currentColor;stroke-width:25;fill:none" d = "m220 409.95h200" / >
< path d = "m220 488.74h200" style = "stroke:currentColor;stroke-width:25;fill:none" / >
< path d = "m220 331.15h200" style = "stroke:currentColor;stroke-width:25;fill:none" / >
< / g >
< / g >
< / symbol >
2017-08-15 18:47:49 +02:00
< symbol id = "tick" viewBox = "0 0 177.16535 177.16535" >
< g transform = "translate(0 -875.2)" >
< rect style = "stroke-width:0;fill:currentColor" transform = "rotate(30)" height = "155" width = "40" y = "702.99" x = "556.82" / >
< rect style = "stroke-width:0;fill:currentColor" transform = "rotate(30)" height = "40" width = "90.404" y = "817.99" x = "506.42" / >
< / g >
< / symbol >
2017-07-03 13:43:14 +02:00
< / svg >
2017-07-29 11:18:45 +02:00
< div class = "wrapper " >
< header class = "intro-and-nav" role = "banner" >
< div >
< div class = "intro" >
2017-09-12 17:05:10 +02:00
< a class = "logo" href = "https://thepaciellogroup.github.io/infusion/" aria-label = "Infusion home page" >
2017-08-07 23:20:49 +02:00
< img src = "https://thepaciellogroup.github.io/infusion/images/logo.svg" alt = "" >
2017-07-29 11:18:45 +02:00
< / a >
2017-07-30 11:57:22 +02:00
< p class = "library-desc" >
2017-09-09 10:35:57 +02:00
Documentation for the < strong > Infusion< / strong > documentation builder, built with < strong > Infusion< / strong > itself.
2017-07-30 11:57:22 +02:00
2017-08-07 23:20:49 +02:00
< a class = "print" href = "https://thepaciellogroup.github.io/infusion/print-version" >
2017-08-12 10:14:05 +02:00
< svg viewBox = "0 0 35 45" aria-hidden = "true" focusable = "false" >
< use xlink:href = "#doc" > < / use >
< / svg > Print version
2017-07-30 11:57:22 +02:00
< / a >
< / p >
2017-07-29 11:18:45 +02:00
< / div >
2017-07-03 13:43:14 +02:00
2017-07-29 11:18:45 +02:00
< nav id = "patterns-nav" class = "patterns" role = "navigation" >
2017-09-12 13:36:17 +02:00
< h2 class = "vh" > Main navigation< / h2 >
2017-07-29 11:18:45 +02:00
< button id = "menu-button" aria-expanded = "false" >
2017-08-12 10:14:05 +02:00
< svg viewBox = "0 0 50 50" aria-hidden = "true" focusable = "false" >
2017-07-29 11:18:45 +02:00
< use xlink:href = "#menu" > < / use >
< / svg >
Menu
< / button >
2017-07-03 13:43:14 +02:00
2017-07-29 11:18:45 +02:00
< ul id = "patterns-list" >
< li class = "pattern" >
2017-08-07 23:20:49 +02:00
< a href = "https://thepaciellogroup.github.io/infusion/patterns/installation/" >
2017-08-03 13:16:24 +02:00
< svg class = "bookmark-icon" aria-hidden = "true" focusable = "false" viewBox = "0 0 40 50" >
< use xlink:href = "#bookmark" > < / use >
< / svg >
2017-07-29 11:18:45 +02:00
< span class = "text" > Installation< / span >
< / a >
< / li >
< li class = "pattern" >
2017-09-07 10:31:52 +02:00
< a href = "https://thepaciellogroup.github.io/infusion/patterns/setup/" >
2017-08-03 13:16:24 +02:00
< svg class = "bookmark-icon" aria-hidden = "true" focusable = "false" viewBox = "0 0 40 50" >
< use xlink:href = "#bookmark" > < / use >
< / svg >
2017-09-07 10:31:52 +02:00
< span class = "text" > Setup< / span >
2017-07-29 11:18:45 +02:00
< / a >
< / li >
< li class = "pattern" >
2017-08-07 23:20:49 +02:00
< a href = "https://thepaciellogroup.github.io/infusion/patterns/serving/" >
2017-08-03 13:16:24 +02:00
< svg class = "bookmark-icon" aria-hidden = "true" focusable = "false" viewBox = "0 0 40 50" >
< use xlink:href = "#bookmark" > < / use >
< / svg >
2017-07-29 11:18:45 +02:00
< span class = "text" > Serving< / span >
< / a >
< / li >
2017-08-02 10:23:48 +02:00
< li class = "pattern" >
2017-08-07 23:20:49 +02:00
< a href = "https://thepaciellogroup.github.io/infusion/patterns/printing/" >
2017-08-03 13:16:24 +02:00
< svg class = "bookmark-icon" aria-hidden = "true" focusable = "false" viewBox = "0 0 40 50" >
< use xlink:href = "#bookmark" > < / use >
< / svg >
2017-08-02 10:23:48 +02:00
< span class = "text" > Printing< / span >
< / a >
< / li >
2017-08-22 10:54:01 +02:00
< li class = "pattern" >
< a href = "https://thepaciellogroup.github.io/infusion/patterns/updating/" >
< svg class = "bookmark-icon" aria-hidden = "true" focusable = "false" viewBox = "0 0 40 50" >
< use xlink:href = "#bookmark" > < / use >
< / svg >
< span class = "text" > Updating Infusion< / span >
< / a >
< / li >
2017-07-29 11:18:45 +02:00
< li >
< h3 > Writing< / h3 >
< ul >
< li class = "pattern" >
2017-09-07 10:31:52 +02:00
< a href = "https://thepaciellogroup.github.io/infusion/patterns/writing/project-structure/" >
2017-08-03 13:16:24 +02:00
< svg class = "bookmark-icon" aria-hidden = "true" viewBox = "0 0 40 50" focusable = "false" >
< use xlink:href = "#bookmark" > < / use >
< / svg >
2017-09-07 10:31:52 +02:00
< span class = "text" > Project structure< / span >
2017-07-29 11:18:45 +02:00
< / a >
< / li >
< li class = "pattern" >
2017-08-07 23:20:49 +02:00
< a href = "https://thepaciellogroup.github.io/infusion/patterns/writing/markdown-and-metadata/" >
2017-08-03 13:16:24 +02:00
< svg class = "bookmark-icon" aria-hidden = "true" viewBox = "0 0 40 50" focusable = "false" >
< use xlink:href = "#bookmark" > < / use >
< / svg >
2017-07-29 11:18:45 +02:00
< span class = "text" > Markdown & metadata< / span >
< / a >
< / li >
< li class = "pattern" >
2017-08-07 23:20:49 +02:00
< a href = "https://thepaciellogroup.github.io/infusion/patterns/writing/expandable-sections/" >
2017-08-03 13:16:24 +02:00
< svg class = "bookmark-icon" aria-hidden = "true" viewBox = "0 0 40 50" focusable = "false" >
< use xlink:href = "#bookmark" > < / use >
< / svg >
2017-07-29 11:18:45 +02:00
< span class = "text" > Expandable sections< / span >
< / a >
< / li >
< li class = "pattern" >
2017-08-07 23:20:49 +02:00
< a href = "https://thepaciellogroup.github.io/infusion/patterns/writing/notes-and-warnings/" >
2017-08-03 13:16:24 +02:00
< svg class = "bookmark-icon" aria-hidden = "true" viewBox = "0 0 40 50" focusable = "false" >
< use xlink:href = "#bookmark" > < / use >
< / svg >
2017-07-29 11:18:45 +02:00
< span class = "text" > Notes & warnings< / span >
< / a >
< / li >
< li class = "pattern" >
2017-08-07 23:20:49 +02:00
< a href = "https://thepaciellogroup.github.io/infusion/patterns/writing/references/" >
2017-08-03 13:16:24 +02:00
< svg class = "bookmark-icon" aria-hidden = "true" viewBox = "0 0 40 50" focusable = "false" >
< use xlink:href = "#bookmark" > < / use >
< / svg >
2017-07-29 11:18:45 +02:00
< span class = "text" > References< / span >
< / a >
< / li >
2017-08-15 18:47:49 +02:00
< li class = "pattern" >
< a href = "https://thepaciellogroup.github.io/infusion/patterns/writing/snippets/" >
< svg class = "bookmark-icon" aria-hidden = "true" viewBox = "0 0 40 50" focusable = "false" >
< use xlink:href = "#bookmark" > < / use >
< / svg >
< span class = "text" > Snippets< / span >
< / a >
< / li >
2017-07-29 11:18:45 +02:00
< li class = "pattern" >
2017-08-07 23:20:49 +02:00
< a href = "https://thepaciellogroup.github.io/infusion/patterns/writing/tables-of-contents/" >
2017-08-03 13:16:24 +02:00
< svg class = "bookmark-icon" aria-hidden = "true" viewBox = "0 0 40 50" focusable = "false" >
< use xlink:href = "#bookmark" > < / use >
< / svg >
2017-07-29 11:18:45 +02:00
< span class = "text" > Tables of contents< / span >
< / a >
< / li >
< / ul >
< / li >
< li >
< h3 > Media< / h3 >
< ul >
< li class = "pattern" >
2017-08-07 23:20:49 +02:00
< a href = "https://thepaciellogroup.github.io/infusion/patterns/media/including-images/" >
2017-08-03 13:16:24 +02:00
< svg class = "bookmark-icon" aria-hidden = "true" viewBox = "0 0 40 50" focusable = "false" >
< use xlink:href = "#bookmark" > < / use >
< / svg >
2017-07-29 11:18:45 +02:00
< span class = "text" > Including images< / span >
< / a >
< / li >
< li class = "pattern" >
2017-08-07 23:20:49 +02:00
< a href = "https://thepaciellogroup.github.io/infusion/patterns/media/including-videos/" >
2017-08-03 13:16:24 +02:00
< svg class = "bookmark-icon" aria-hidden = "true" viewBox = "0 0 40 50" focusable = "false" >
< use xlink:href = "#bookmark" > < / use >
< / svg >
2017-07-29 11:18:45 +02:00
< span class = "text" > Including videos< / span >
< / a >
< / li >
< / ul >
< / li >
< li >
< h3 > Coding< / h3 >
< ul >
< li class = "pattern" >
2017-08-07 23:20:49 +02:00
< a href = "https://thepaciellogroup.github.io/infusion/patterns/coding/code-blocks/" aria-current = "page" >
2017-08-03 13:16:24 +02:00
< svg class = "bookmark-icon" aria-hidden = "true" viewBox = "0 0 40 50" focusable = "false" >
< use xlink:href = "#bookmark" > < / use >
< / svg >
2017-07-29 11:18:45 +02:00
< span class = "text" > Code blocks< / span >
< / a >
< / li >
< li class = "pattern" >
2017-08-07 23:20:49 +02:00
< a href = "https://thepaciellogroup.github.io/infusion/patterns/coding/demo-embedding/" >
2017-08-03 13:16:24 +02:00
< svg class = "bookmark-icon" aria-hidden = "true" viewBox = "0 0 40 50" focusable = "false" >
< use xlink:href = "#bookmark" > < / use >
< / svg >
2017-07-29 11:18:45 +02:00
< span class = "text" > Demo embedding< / span >
< / a >
< / li >
< li class = "pattern" >
2017-08-07 23:20:49 +02:00
< a href = "https://thepaciellogroup.github.io/infusion/patterns/coding/writing-inline-demos/" >
2017-08-03 13:16:24 +02:00
< svg class = "bookmark-icon" aria-hidden = "true" viewBox = "0 0 40 50" focusable = "false" >
< use xlink:href = "#bookmark" > < / use >
< / svg >
2017-07-29 11:18:45 +02:00
< span class = "text" > Writing inline demos< / span >
< / a >
< / li >
< li class = "pattern" >
2017-08-07 23:20:49 +02:00
< a href = "https://thepaciellogroup.github.io/infusion/patterns/coding/color-palettes/" >
2017-08-03 13:16:24 +02:00
< svg class = "bookmark-icon" aria-hidden = "true" viewBox = "0 0 40 50" focusable = "false" >
< use xlink:href = "#bookmark" > < / use >
< / svg >
2017-07-29 11:18:45 +02:00
< span class = "text" > Color palettes< / span >
< / a >
< / li >
< li class = "pattern" >
2017-08-07 23:20:49 +02:00
< a href = "https://thepaciellogroup.github.io/infusion/patterns/coding/command-line/" >
2017-08-03 13:16:24 +02:00
< svg class = "bookmark-icon" aria-hidden = "true" viewBox = "0 0 40 50" focusable = "false" >
< use xlink:href = "#bookmark" > < / use >
< / svg >
2017-07-29 11:18:45 +02:00
< span class = "text" > Command line< / span >
< / a >
< / li >
< li class = "pattern" >
2017-08-07 23:20:49 +02:00
< a href = "https://thepaciellogroup.github.io/infusion/patterns/coding/file-trees/" >
2017-08-03 13:16:24 +02:00
< svg class = "bookmark-icon" aria-hidden = "true" viewBox = "0 0 40 50" focusable = "false" >
< use xlink:href = "#bookmark" > < / use >
< / svg >
2017-07-29 11:18:45 +02:00
< span class = "text" > File trees< / span >
< / a >
< / li >
< li class = "pattern" >
2017-08-07 23:20:49 +02:00
< a href = "https://thepaciellogroup.github.io/infusion/patterns/coding/tested/" >
2017-08-03 13:16:24 +02:00
< svg class = "bookmark-icon" aria-hidden = "true" viewBox = "0 0 40 50" focusable = "false" >
< use xlink:href = "#bookmark" > < / use >
< / svg >
2017-07-29 11:18:45 +02:00
< span class = "text" > Tested using...< / span >
< / a >
< / li >
< / ul >
< / li >
< / ul >
2017-07-03 13:43:14 +02:00
2017-07-29 11:18:45 +02:00
< / nav >
2017-07-03 13:43:14 +02:00
2017-07-29 11:18:45 +02:00
< / div >
< / header >
2017-07-03 13:43:14 +02:00
< div class = "main-and-footer" >
< div >
< main id = "main" >
2017-07-28 14:31:46 +02:00
< h1 >
2017-08-03 13:16:24 +02:00
< svg class = "bookmark-icon" aria-hidden = "true" viewBox = "0 0 40 50" focusable = "false" >
< use xlink:href = "#bookmark" > < / use >
< / svg >
2017-07-28 14:31:46 +02:00
Code blocks
< / h1 >
2017-07-03 13:43:14 +02:00
2017-07-14 18:26:35 +02:00
2017-10-07 11:36:18 +02:00
< p > Markdown already supports code samples both inline (using single backticks like `some code here`) and in blocks. < strong > Infusion< / strong > will syntax highlight HTML, CSS, and JavaScript if you provide the correct language in the formulation of the block.< / p >
2017-07-03 13:43:14 +02:00
< p > So, this… < / p >
2017-09-18 14:54:44 +02:00
< pre class = "" > < code data-codeblock-shortcode >
2017-07-03 13:43:14 +02:00
```html
< button aria-pressed="false">toggle me< /button>
```
< / code > < / pre >
< p > … will result in this:< / p >
< pre > < code class = "language-html" > < button aria-pressed=" false" > toggle me< /button>
< / code > < / pre >
< p > Note that the syntax highlighting uses a greyscale theme. < strong > Infusion< / strong > is careful not to use color as part of its own design, because these colors may clash with those of the design being illustrated and discussed.< / p >
2017-08-15 10:55:30 +02:00
< aside aria-label = "note" class = "note" >
< div >
2017-09-18 12:11:16 +02:00
< svg class = "sign" aria-hidden = "true" viewBox = "0 0 41.667306 41.66729" focusable = "false" >
2017-08-15 10:55:30 +02:00
< use xlink:href = "#info" > < / use >
< / svg >
< p > To preserve the wrapping inside code blocks, horizontal scrolling is implemented. To make sure scrolling is keyboard accessible, code blocks are focusable. An < code > aria-label< / code > is provided to identify the code block to screen reader users.< / p >
< / div >
< / aside >
2017-10-08 14:00:44 +02:00
< h2 id = "annotated-code" > Annotated code< / h2 >
2017-10-07 11:36:18 +02:00
2017-10-08 14:00:44 +02:00
< p > < strong > Infusion< / strong > offers the ability to highlight and annotate specific parts of your code examples using the < code > code< / code > shortcode. Take an accessible dialog. You may wish to point out key attributes that make that dialog support assistive technologies:< / p >
2017-10-07 11:36:18 +02:00
2017-10-07 13:27:26 +02:00
2017-10-08 14:00:44 +02:00
< div class = "code-annotated " > < code >
2017-10-07 13:27:26 +02:00
< div < span class = 'highlight' > role=" dialog" < / span > < span class = 'highlight' > aria-labelledby=" dialog-heading" < / span > >
< button < span class = 'highlight' > aria-label=" close" < / span > > x< /button>
< h2 < span class = 'highlight' > id=" dialog-heading" < / span > > Confirmation< /h2>
< p> Press < strong> Okay< /strong> to confirm or < strong> Cancel< /strong> < /p>
< button> Okay< /button>
< button> Cancel< /button>
< /div>
2017-10-07 11:36:18 +02:00
< / code > < / div >
2017-10-08 14:00:44 +02:00
< p > You mark out the highlighted areas using triple square brackets like so:< / p >
2017-10-07 13:27:26 +02:00
< pre class = "" > < code data-codeblock-shortcode >
2017-10-08 14:00:44 +02:00
{ {< code>}}
< div [[[role="dialog"]]] [[[aria-labelledby="dialog-heading"]]]>
< button [[[aria-label="close"]]]>x< /button>
< h2 [[[id="dialog-heading"]]]>Confirmation< /h2>
2017-10-07 13:27:26 +02:00
< p>Press < strong > Okay< / strong > to confirm or < strong > Cancel< / strong > < /p>
< button>Okay< /button>
< button>Cancel< /button>
< /div>
2017-10-08 14:00:44 +02:00
{ {< /code>}}
2017-10-07 13:27:26 +02:00
< / code > < / pre >
2017-10-08 14:00:44 +02:00
< p > Better still, if you include < code > numbered=" true" < / code > , each highlight is enumerated so you can reference it directly in the ensuing text. If you follow the shortcode directly with an ordered list, the styles match:< / p >
2017-10-07 13:27:26 +02:00
2017-10-08 14:00:44 +02:00
< div class = "code-annotated numbered" > < code >
2017-10-07 13:27:26 +02:00
< div < span class = 'highlight' > role=" dialog" < / span > < span class = 'highlight' > aria-labelledby=" dialog-heading" < / span > >
< button < span class = 'highlight' > aria-label=" close" < / span > > x< /button>
< h2 < span class = 'highlight' > id=" dialog-heading" < / span > > Confirmation< /h2>
< p> Press < strong> Okay< /strong> to confirm or < strong> Cancel< /strong> < /p>
< button> Okay< /button>
< button> Cancel< /button>
< /div>
< / code > < / div >
2017-10-08 14:00:44 +02:00
< ol >
< li > The dialog is only announced as a dialog if it takes the < code > dialog< / code > ARIA role< / li >
< li > The < code > aria-labelledby< / code > relationship attribute makes the element carrying the < code > id< / code > it points to its label< / li >
< li > The close button uses < code > aria-label< / code > to provide the text label “ close” , overriding the text content< / li >
< li > The heading is used as the dialog’ s label. The < code > aria-labelledby< / code > attribute points to its < code > id< / code > < / li >
< / ol >
2017-10-07 13:27:26 +02:00
< p > You just include < code > numbered=" true" < / code > on the opening shortcode tag:< / p >
< pre class = "" > < code data-codeblock-shortcode >
2017-10-08 14:00:44 +02:00
{ {< code numbered="true">}}
< div [[[role="dialog"]]] [[[aria-labelledby="dialog-heading"]]]>
< button [[[aria-label="close"]]]>x< /button>
< h2 [[[id="dialog-heading"]]]>Confirmation< /h2>
2017-10-07 13:27:26 +02:00
< p>Press < strong > Okay< / strong > to confirm or < strong > Cancel< / strong > < /p>
< button>Okay< /button>
< button>Cancel< /button>
< /div>
2017-10-08 14:00:44 +02:00
{ {< /code>}}
1. The dialog is only announced as a dialog if it takes the `dialog` ARIA role
2. The `aria-labelledby` relationship attribute makes the element carrying the `id` it points to its label
3. The close button uses `aria-label` to provide the text label "close", overriding the text content
4. The heading is used as the dialog's label. The `aria-labelledby` attribute points to its `id`
2017-10-07 13:27:26 +02:00
< / code > < / pre >
2017-10-08 14:00:44 +02:00
< h3 id = "javascript-example" > JavaScript example< / h3 >
< div class = "code-annotated numbered" > < code >
/* Enable scrolling by keyboard of code samples */
(function () {
var codeBlocks = document.querySelectorAll(' pre, .code-annotated' );
Array.prototype.forEach.call(codeBlocks, function (block) {
if (block.querySelector(' code' )) {
block.setAttribute(< span class = 'highlight' > ' role' , ' region' < / span > );
block.setAttribute(< span class = 'highlight' > ' aria-label' , ' code sample' < / span > );
if (block.scrollWidth > block.clientWidth) {
block.setAttribute(' tabindex' , ' 0' );
}
}
});
}());
< / code > < / div >
< ol >
< li > The < code > region< / code > role announces the block as a region< / li >
< li > The < code > aria-label< / code > describes the kind of content to be expected in the region< / li >
< / ol >
2017-10-07 14:45:48 +02:00
< aside aria-label = "note" class = "note" >
< div >
< svg class = "sign" aria-hidden = "true" viewBox = "0 0 41.667306 41.66729" focusable = "false" >
< use xlink:href = "#info" > < / use >
< / svg >
2017-10-08 14:00:44 +02:00
< p > As you may have noticed, using specified highlights with the < code > code< / code > shortcode sacrifices syntax highlighting. If you want syntax highlighting you must use the markdown triple back-tick syntax and annotation is not available.< / p >
2017-10-07 14:45:48 +02:00
< / div >
< / aside >
2017-07-03 13:43:14 +02:00
< / main >
< footer role = "contentinfo" >
2017-08-17 18:21:19 +02:00
< div >
< label for = "themer" >
dark theme: < input type = "checkbox" id = "themer" class = "vh" >
< span aria-hidden = "true" > < / span >
< / label >
< / div >
2017-07-13 20:05:53 +02:00
Powered by < strong > Infusion< / strong > , a < strong > The Paciello Group< / strong > project.< br >
2017-07-11 17:24:52 +02:00
For general enquiries, contact us on info@paciellogroup.com.
2017-07-03 13:43:14 +02:00
< / footer >
< / div >
< / div >
< / div >
2017-08-07 23:20:49 +02:00
< script src = "https://thepaciellogroup.github.io/infusion/js/prism.js" > < / script >
< script src = "https://thepaciellogroup.github.io/infusion/js/dom-scripts.js" > < / script >
2017-07-11 17:24:52 +02:00
2017-07-03 13:43:14 +02:00
< / body >
< / html >
