Pitfalls

<!DOCTYPE html> <html> <head> <title>Pitfalls</title> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=3" /> <meta content="ImageJ Wiki" property="og:site_name"> <meta content="Pitfalls" property="og:title"> <meta content="article" property="og:type"> <meta content="The ImageJ wiki is a community-edited knowledge base on topics relating to ImageJ, a public domain program for processing and analyzing scientific images, and its ecosystem of derivatives and variants, including ImageJ2, Fiji, and others." property="og:description"> <meta content="https://imagej.github.io/editing/pitfalls" property="og:url"> <meta content="https://imagej.github.io/media/icons/imagej2.png" property="og:image"> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> <link rel="manifest" href="/site.webmanifest"> <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5"> <meta name="msapplication-TileColor" content="#da532c"> <meta name="theme-color" content="#ffffff"> <link rel="stylesheet" href="/assets/css/lightbox.min.css" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/instantsearch.css@7/themes/algolia-min.css"/> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/dygraphs@2.1.0/dist/dygraph.min.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/dygraphs@2.1.0/dist/dygraph.min.css" /> <link rel="stylesheet" href="/assets/css/main.css" /> <link rel="stylesheet" href="/assets/css/layout.css"/> <link rel="stylesheet" href="/assets/css/includes.css" /> <link rel="stylesheet" href="/assets/css/timeline.css"/> <link rel="stylesheet" href="/assets/css/dock.css"/> <noscript><link rel="stylesheet" href="/assets/css/noscript.css" /></noscript> <link rel="stylesheet" href="/assets/css/page.css" /> </head> <body class="is-preload">  <section id="top-bar"> <a href="/"><img id="site-logo" src="/media/icons/imagej2.png"></a> <div id="search-panel"> <div id="search-box"></div> </div> </section>  <div class="page-info"> <a href="https://github.com/imagej/imagej.github.io/commits/main/_pages/editing/pitfalls.md">Page history</a> <a href="https://github.com/imagej/imagej.github.io/edit/main/_pages/editing/pitfalls.md">Edit this page</a> <a href="/editing">How do I edit this website?</a></div> <section id="left-column" class="sidebar dock">  <div class="menu dockable"> <div class="drag-handle"></div><h3>ImageJ Docs</h3> <ul> <li><a href="/downloads">Download</a></li> <li><details><summary>Learn</summary><ul> <li><details><summary><a href="/learn">ImageJ Basics</a></summary><ul> <li><a href="/tutorials">Tutorials</a></li> <li><a href="/learn/user-guides">User Guides</a></li> <li><a href="/learn/keyboard-shortcuts">Keyboard Shortcuts</a></li> <li><a href="/learn/tips-and-tricks">Tips and Tricks</a></li> <li><a href="/learn/troubleshooting">Troubleshooting</a></li> <li><a href="/learn/faq">Frequently Asked Questions</a></li> <li><details><summary><a href="/platforms">Supported Platforms</a></summary><ul> <li><a href="/platforms/windows">Windows</a></li> <li><a href="/platforms/macos">MacOS</a></li> <li><a href="/platforms/linux">Linux</a></li> <li><a href="/platforms/pi">Raspberry Pi</a></li> <li><a href="/platforms/android">Android</a></li> </ul></details></li>  <li><details><summary><a href="/formats">File Formats</a></summary><ul> <li><a href="/formats/bio-formats">Bio-Formats</a></li> <li><a href="/formats/video">Video formats</a></li> <li><a href="/formats/quicktime">QuickTime</a></li> <li><a href="/formats/tiff">TIFF</a></li> <li><a href="/formats/pdf">PDF</a></li> <li><a href="/formats/dicom">DICOM</a></li> <li><a href="/formats/lsm">Zeiss LSM</a></li> <li><a href="/formats/olympus">Olympus VSI</a></li> <li><a href="/formats/lurawave">Opera Flex</a></li> <li><a href="/formats/fib-sem">FIB-SEM</a></li> </ul></details></li>  </ul></details></li>  <li><details><summary><a href="/imaging">Scientific Imaging</a></summary><ul> <li><a href="/imaging/principles">Principles of Scientific Imaging</a></li> <li><a href="/imaging/annotating-images">Annotating Images</a></li> <li><a href="/imaging/colocalization-analysis">Colocalization</a></li> <li><a href="/imaging/color-image-processing">Color Image Processing</a></li> <li><a href="/imaging/deconvolution">Deconvolution</a></li> <li><a href="/imaging/image-intensity-processing">Image Intensity Processing</a></li> <li><a href="/imaging/particle-analysis">Particle Analysis</a></li> <li><a href="/imaging/registration">Registration</a></li> <li><a href="/imaging/segmentation">Segmentation</a></li> <li><a href="/imaging/stack-slice-manipulations">Stack-slice Manipulations</a></li> <li><a href="/imaging/t-functions">T-functions</a></li> <li><a href="/imaging/tracking">Tracking</a></li> <li><a href="/imaging/visualization">Visualization</a></li> <li><a href="/imaging/z-functions">Z-functions</a></li> </ul></details></li>  </ul></details></li>  <li><details><summary><a href="/plugins">Extend</a></summary><ul> <li><a href="/list-of-extensions">List of Extensions</a></li> <li><details><summary><a href="/update-sites">Update Sites</a></summary><ul> <li><a href="/list-of-update-sites">List of Update Sites</a></li> <li><a href="/update-sites/following">Following an Update Site</a></li> <li><a href="/update-sites/setup">Creating an Update Site</a></li> <li><a href="/update-sites/tos">Terms of Service</a></li> <li><a href="/update-sites/automatic-uploads">Automatic Upload</a></li> <li><a href="/update-sites/core-uploads">Uploading to Core Sites</a></li> <li><a href="/update-sites/faq">Update Sites FAQ</a></li> <li><a href="/update-sites/stats">Statistics</a></li> </ul></details></li>  <li><details><summary><a href="/scripting">Scripting</a></summary><ul> <li><a href="/scripting/basics">Scripting Basics</a></li> <li><a href="/scripting/script-editor">Script Editor</a></li> <li><a href="/scripting/parameters">Parameters</a></li> <li><a href="/scripting/user-input">User Input</a></li> <li><a href="/scripting/auto-imports">Auto Import</a></li> <li><a href="/scripting/templates">Templates</a></li> <li><a href="/scripting/batch">Batch Processing</a></li> <li><a href="/scripting/headless">Running Headlessly</a></li> <li><a href="/scripting/comparisons">Scripting Comparisons</a></li> <li><a href="/scripting/toolbox">Toolbox</a></li> <li><details><summary>Languages</summary><ul> <li><a href="/scripting/beanshell">BeanShell Scripting</a></li> <li><a href="/scripting/groovy">Groovy Scripting</a></li> <li><a href="/scripting/macro">ImageJ Macro</a></li> <li><a href="/scripting/javascript">JavaScript</a></li> <li><a href="/scripting/clojure">Lisp (Clojure)</a></li> <li><a href="/scripting/matlab">MATLAB</a></li> <li><a href="/scripting/jython">Python (Jython)</a></li> <li><a href="/scripting/python">Python (native)</a></li> <li><a href="/scripting/renjin">R (Renjin)</a></li> <li><a href="/scripting/jruby">Ruby (JRuby)</a></li> <li><a href="/scripting/scala">Scala Scripting</a></li> </ul></details></li>  </ul></details></li>  <li><details><summary><a href="/develop">Development</a></summary><ul> <li><a href="/develop/philosophy">Philosophy</a></li> <li><a href="/develop/architecture">Architecture</a></li> <li><a href="/develop/source">Source code</a></li> <li><a href="/develop/project-management">Project management</a></li> <li><a href="/develop/coding-style">Coding style</a></li> <li><a href="/develop/javadoc">Using Javadoc</a></li> <li><a href="/develop/debugging">Debugging</a></li> <li><a href="/develop/wish-list">Wish list</a></li> <li><details><summary>Tools</summary><ul> <li><a href="/develop/github">GitHub</a></li> <li><a href="/develop/maven">Maven</a></li> <li><a href="/develop/ci">CI/CD</a></li> <li><a href="/develop/dotfiles">Dotfiles</a></li> <li><details><summary><a href="/develop/ides">IDEs</a></summary><ul> <li><a href="/develop/eclipse">Eclipse</a></li> <li><a href="/develop/netbeans">NetBeans</a></li> <li><a href="/develop/intellij">IntelliJ IDEA</a></li> <li><a href="/develop/command-line">Command Line</a></li> </ul></details></li> </ul></details></li>  <li><details><summary>Guides</summary><ul> <li><a href="/develop/plugins">Writing plugins</a></li> <li><a href="/develop/improving-the-code">Contributing to a plugin</a></li> <li><a href="/develop/releasing">Development lifecycle</a></li> <li><a href="/develop/building-a-pom">Building a POM</a></li> <li><a href="/develop/debugging-exercises">Hands-on debugging</a></li> <li><a href="/develop/writing-ops">Adding new ops</a></li> <li><a href="/develop/formats">Adding new formats</a></li> <li><a href="/develop/native-libraries">Using native libraries</a></li> <li><a href="/develop/tips">Tips for developers</a></li> <li><a href="/develop/cpp-tips">Tips for C++ developers</a></li> <li><a href="/develop/ij1-plugins">ImageJ 1.x plugins</a></li> <li><a href="/develop/versioning">Versioning</a></li> <li><a href="/develop/logging">Logging</a></li> <li><a href="/develop/uber-jars">Uber-JARs</a></li> </ul></details></li>  <li><details><summary><a href="/develop/git">Git</a></summary><ul> <li><a href="/develop/git/eclipse">Git in Eclipse (EGit)</a></li> <li><a href="/develop/git/mini-howto">Git mini howto</a></li> <li><a href="/develop/git/workshop">Git workshop</a></li> <li><a href="/develop/git/conflicts">Git conflicts</a></li> <li><a href="/develop/git/topic-branches">Git topic branches</a></li> <li><a href="/develop/git/notes">Git notes</a></li> <li><a href="/develop/git/reflogs">Git reflogs</a></li> <li><a href="/develop/git/submodules">Git submodules</a></li> <li><a href="/develop/git/pinpoint-regressions">How to pinpoint regressions</a></li> <li><a href="/develop/git/publish-a-repository">How to publish a git repository</a></li> <li><a href="/develop/git/extract-a-subproject">How to extract a subproject</a></li> </ul></details></li>  </ul></details></li>  </ul></details></li>  <li><details open><summary><a href="/contribute">Contribute</a></summary><ul> <li><a href="/contribute/citing">Citing</a></li> <li><a href="/people">Contributors</a></li> <li><a href="/orgs">Organizations</a></li> <li><a href="/contribute/governance">Governance</a></li> <li><a href="/contribute/funding">Funding</a></li> <li><a href="/contribute/fiji">Contributing to Fiji</a></li> <li><details><summary><a href="/licensing">Licensing</a></summary><ul> <li><details><summary><a href="/licensing/open-source">Open Source</a></summary><ul> <li><a href="/licensing/apache">Apache</a></li> <li><a href="/licensing/bsd">BSD</a></li> <li><a href="/licensing/epl">EPL</a></li> <li><a href="/licensing/gpl">GPL</a></li> <li><a href="/licensing/lgpl">LGPL</a></li> <li><a href="/licensing/mit">MIT</a></li> <li><a href="/licensing/public-domain">Public domain</a></li> <li><a href="/licensing/big">BIG</a></li> </ul></details></li>  <li><a href="/licensing/closed-source">Proprietary</a></li> </ul></details></li>  <li><details open><summary><a href="/editing">Editing the Wiki</a></summary><ul> <li><a href="/editing/advanced">Advanced Editing</a></li> <li><a href="/editing/buttons">Buttons</a></li> <li><a href="/editing/citations">Citations</a></li> <li><a href="/editing/code">Source Code</a></li> <li><a href="/editing/debugging">Debugging</a></li> <li><a href="/editing/headers">Headers</a></li> <li><a href="/editing/icons">Icons</a></li> <li><a href="/editing/images">Images</a></li> <li><a href="/editing/keys">Keyboard Shortcuts</a></li> <li><a href="/editing/linking">Linking</a></li> <li><a href="/editing/math">Math Expressions</a></li> <li><a href="/editing/menu-paths">Menu Paths</a></li> <li><a href="/editing/navigation">Navigation</a></li> <li><a href="/editing/notices">Notices</a></li> <li><a href="/editing/people">People</a></li> <li><a class="current-page">Pitfalls</a></li> <li><a href="/editing/quizzes">Quizzes</a></li> <li><a href="/editing/statbox">Statbox</a></li> <li><a href="/editing/symbols">Symbols</a></li> <li><a href="/editing/tables">Tables</a></li> <li><a href="/editing/timelines">Timelines</a></li> <li><a href="/editing/tooltips">Tooltips</a></li> <li><a href="/editing/videos">Videos</a></li> <li><a href="/editing/whitespace">Whitespace</a></li> </ul></details></li>  </ul></details></li>  <li><details><summary><a href="/discuss">Discuss</a></summary><ul> <li><a href="/discuss/bugs">Reporting Issues</a></li> <li><a href="/discuss/mailing-lists">Mailing Lists</a></li> <li><a href="/discuss/chat">Chat</a></li> </ul></details></li>  <li><details><summary>Explore</summary><ul> <li><a href="/news">News</a></li> <li><details><summary><a href="/events">Events</a></summary><ul> <li><a href="/events/presentations">Presentations</a></li> <li><a href="/events/conferences">Conferences</a></li> <li><a href="/events/hackathons">Hackathons</a></li> <li><a href="/events">More...</a></li> </ul></details></li>  <li><details><summary><a href="/libs">Libraries</a></summary><ul> <li><a href="/libs/imagej-ops">ImageJ Ops</a></li> <li><a href="/libs/imagej-common">ImageJ Common</a></li> <li><a href="/libs/imagej-legacy">ImageJ Legacy</a></li> <li><a href="/libs/scijava">SciJava</a></li> <li><a href="/libs/scifio">SCIFIO</a></li> <li><details><summary><a href="/libs/imglib2">ImgLib2</a></summary><ul> <li><a href="/libs/imglib2/getting-started">Getting Started</a></li> <li><a href="/libs/imglib2/accessors">Accessors</a></li> <li><a href="/libs/imglib2/accessibles">Accessibles</a></li> <li><a href="/libs/imglib2/examples">Examples</a></li> <li><a href="/libs/imglib2/workshop-introductory">Introductory Workshop</a></li> <li><a href="/libs/imglib2/workshop-advanced">Advanced Workshop</a></li> <li><a href="/libs/imglib2/matlab">ImgLib2 images in MATLAB</a></li> <li><a href="/libs/imglib2/benchmarks">Benchmarks</a></li> <li><a href="/libs/imglib2/faq">FAQ</a></li> <li><a href="/libs/imglib2/developing">Developing ImgLib2</a></li> <li><a href="/libs/imglib2/discussion">ImgLib2 Discussion</a></li> </ul></details></li>  <li><a href="/libs">More...</a></li> </ul></details></li>  <li><details><summary><a href="/software">Software</a></summary><ul> <li><a href="/software/nih-image">NIH Image</a></li> <li><a href="/software/imagej">ImageJ</a></li> <li><a href="/software/imagej2">ImageJ2</a></li> <li><a href="/software/fiji">Fiji</a></li> <li><a href="/software">More...</a></li> </ul></details></li>  </ul></details></li>  </ul> </div> </section> <section id="right-column" class="sidebar dock">   <div id="toc" class="toc menu dockable"> <div class="drag-handle"></div> <h3>Page contents</h3> <ul data-toc="#content" data-toc-headings="h1,h2,h3,h4,h5,h6"></ul> </div> </section>  <div class="container"> <header class="major special"> <h1>Pitfalls</h1> </header> </div>  <div id="nav-bar"><ul class="shadowed-box"><li><a href="/editing/index">Introduction</a></li><li><a href="/editing/advanced">Advanced Editing</a></li><li><a href="/editing/buttons">Buttons</a></li><li><a href="/editing/citations">Citations</a></li><li><a href="/editing/code">Source Code</a></li><li><a href="/editing/debugging">Debugging</a></li><li><a href="/editing/dokuwiki-migration">DokuWiki Migration</a></li><li><a href="/editing/headers">Headers</a></li><li><a href="/editing/icons">Icons</a></li><li><a href="/editing/images">Images</a></li><li><a href="/editing/keys">Keyboard Shortcuts</a></li><li><a href="/editing/linking">Linking</a></li><li><a href="/editing/math">Math Expressions</a></li><li><a href="/editing/menu-paths">Menu Paths</a></li><li><a href="/editing/navigation">Navigation</a></li><li><a href="/editing/notices">Notices</a></li><li><a href="/editing/people">People</a></li><li>Pitfalls</li><li><a href="/editing/quizzes">Quizzes</a></li><li><a href="/editing/statbox">Statbox</a></li><li><a href="/editing/symbols">Symbols</a></li><li><a href="/editing/tables">Tables</a></li><li><a href="/editing/timelines">Timelines</a></li><li><a href="/editing/tooltips">Tooltips</a></li><li><a href="/editing/videos">Videos</a></li><li><a href="/editing/whitespace">Whitespace</a></li></ul></div>  <section id="page" class="main style1"> <div class="container"> <div class="box alt"></div> <div id="content" class="page-content"> <p>This page covers pitfalls to be aware of when writing content for the site.</p> <p>This site uses Markdown for rich text formatting. It is powerful and friendly, but not a full replacement for raw HTML. Fortunately, you can mix HTML into your Markdown, as long as you are careful!</p> <h2 id="mixing-markdown-and-html">Mixing Markdown and HTML</h2> <p>You can apply CSS styles to inline HTML elements such as <code class="language-plaintext highlighter-rouge"><span></code>, and any nearby Markdown will still be applied:</p> <div class="example"> <div> <p>Code</p> <figure class="highlight"><pre><code class="language-liquid" data-lang="liquid">Enjoy some *<span style="color: red">colored</span> <span style="color: green">text</span> <span style="color: blue">in italics</span>*!</code></pre></figure> </div> <div> <p>Result</p> <div> <p>Enjoy some <em><span style="color: red">colored</span> <span style="color: green">text</span> <span style="color: blue">in italics</span></em>!</p> </div> </div> </div> <h3 id="markdown-inside-block-elements">Markdown inside block elements</h3> <p>If you use a block element, Markdown won’t be rendered inside:</p> <div class="example"> <div> <p>Code</p> <figure class="highlight"><pre><code class="language-liquid" data-lang="liquid"><div> Why isn't *this* in italics? </div></code></pre></figure> </div> <div> <p>Result</p> <div> <div> Why isn't *this* in italics? </div> </div> </div> </div> <p>Add <code class="language-plaintext highlighter-rouge">markdown=1</code> to force Markdown rendering inside that element:</p> <div class="example"> <div> <p>Code</p> <figure class="highlight"><pre><code class="language-liquid" data-lang="liquid"><div markdown=1> Yay, *this* is now in italics! </div></code></pre></figure> </div> <div> <p>Result</p> <div> <div> <p>Yay, <em>this</em> is now in italics!</p> </div> </div> </div> </div> <div class="notice" style="font-size: 2; background: #ffcccb; border-left: 10px solid #f57900"><div class="notice-icon"><img src="/media/icons/warning.png" /></div><div class="notice-content"><p>Be sure to <strong><em>put a newline before your <code class="language-plaintext highlighter-rouge"></div></code></em></strong>! Otherwise you will get broken HTML. (Might be a bug in the kramdown renderer?)</p> </div> </div> <p>To avoid the pitfall with <code class="language-plaintext highlighter-rouge"></div></code> and newlines, you can instead target the parts you want Markdownified using <code class="language-plaintext highlighter-rouge"><span markdown=1></code>:</p> <div class="example"> <div> <p>Code</p> <figure class="highlight"><pre><code class="language-liquid" data-lang="liquid"><div>I like *asterisks*. They are so <span markdown=1>**pretty**</span>! Do you like *asterisks* too?</div></code></pre></figure> </div> <div> <p>Result</p> <div> <div>I like *asterisks*. They are so <span><strong>pretty</strong></span>! Do you like *asterisks* too?</div> </div> </div> </div> <h3 id="using-capture-and-markdownify">Using <code class="language-plaintext highlighter-rouge">capture</code> and <code class="language-plaintext highlighter-rouge">markdownify</code></h3> <p>In some scenarios, it is easier to use Liquid’s <code class="language-plaintext highlighter-rouge">capture</code> directive to store a block of Markdown into a variable, and then use Jekyll’s <code class="language-plaintext highlighter-rouge">markdownify</code> filter to convert it to HTML, so that it can be more easily mixed with other HTML. One such case is with the <code class="language-plaintext highlighter-rouge"><details></code> to create an expandable block of content. Here is an example:</p> <div class="example"> <div> <p>Code</p> <figure class="highlight"><pre><code class="language-liquid" data-lang="liquid"><span class="p">{%</span><span class="w"> </span><span class="nt">capture</span><span class="w"> </span><span class="nv">periodic-table</span><span class="w"> </span><span class="p">%}</span> | 1 | H | Hydrogen | 1.008 | | 2 | He | Helium | 4.003 | | 3 | Li | Lithium | 6.938 | | 4 | Be | Beryllium | 9.102 | | 5 | B | Boron | 10.806 | | 6 | C | Carbon | 12.009 | | 7 | N | Nitrogen | 14.006 | | 8 | O | Oxygen | 15.999 | | 9 | F | Fluorine | 18.998 | {:.left} <span class="p">{%</span><span class="w"> </span><span class="nt">endcapture</span><span class="w"> </span><span class="p">%}</span> <details><summary>Check out this amazing table!</summary> <span class="p">{{</span><span class="w"> </span><span class="nv">periodic-table</span><span class="w"> </span><span class="p">|</span><span class="w"> </span><span class="nf">markdownify</span><span class="w"> </span><span class="p">}}</span> </details></code></pre></figure> </div> <div> <p>Result</p> <div> <details><summary>Check out this amazing table!</summary> <table class="left"> <tbody> <tr> <td>1</td> <td>H</td> <td>Hydrogen</td> <td>1.008</td> </tr> <tr> <td>2</td> <td>He</td> <td>Helium</td> <td>4.003</td> </tr> <tr> <td>3</td> <td>Li</td> <td>Lithium</td> <td>6.938</td> </tr> <tr> <td>4</td> <td>Be</td> <td>Beryllium</td> <td>9.102</td> </tr> <tr> <td>5</td> <td>B</td> <td>Boron</td> <td>10.806</td> </tr> <tr> <td>6</td> <td>C</td> <td>Carbon</td> <td>12.009</td> </tr> <tr> <td>7</td> <td>N</td> <td>Nitrogen</td> <td>14.006</td> </tr> <tr> <td>8</td> <td>O</td> <td>Oxygen</td> <td>15.999</td> </tr> <tr> <td>9</td> <td>F</td> <td>Fluorine</td> <td>18.998</td> </tr> </tbody> </table> </details> </div> </div> </div> <p>The <code class="language-plaintext highlighter-rouge">markdownify</code> filter can be very useful, but watch out: it does not work well for inline elements because it will surround your Markdown expression in <code class="language-plaintext highlighter-rouge"><p>...</p></code> tags, ruining the inline effect:</p> <div class="example"> <div> <p>Code</p> <figure class="highlight"><pre><code class="language-liquid" data-lang="liquid"><span class="p">{%</span><span class="w"> </span><span class="nt">capture</span><span class="w"> </span><span class="nv">question</span><span class="w"> </span><span class="p">%}</span> Does *Monday* work? <span class="p">{%</span><span class="w"> </span><span class="nt">endcapture</span><span class="w"> </span><span class="p">%}</span> <div>I asked: "<span class="p">{{</span><span class="w"> </span><span class="nv">question</span><span class="w"> </span><span class="p">|</span><span class="w"> </span><span class="nf">markdownify</span><span class="w"> </span><span class="p">}}</span>" and she nodded.</div></code></pre></figure> </div> <div> <p>Result</p> <div> <div>I asked: "<p>Does <em>Monday</em> work?</p> " and she nodded.</div> </div> </div> </div> <h2 id="suppressing-markdown-rendering">Suppressing Markdown rendering</h2> <p>The <code class="language-plaintext highlighter-rouge">markdown</code> attribute can also be used the other way, to suppress Markdown rendering inside an HTML element:</p> <div class="example"> <div> <p>Code</p> <figure class="highlight"><pre><code class="language-liquid" data-lang="liquid"><span markdown=0> Here are some **asterisks**. </span></code></pre></figure> </div> <div> <p>Result</p> <div> <p><span> Here are some **asterisks**. </span></p> </div> </div> </div> <h2 id="conditional-expressions">Conditional expressions</h2> <h3 id="where-conditionals-work">Where conditionals work</h3> <p>Conditional expressions <em>may only be used with <code class="language-plaintext highlighter-rouge">if</code> and <code class="language-plaintext highlighter-rouge">unless</code> tags</em>! They notably <em>do not work</em> with <code class="language-plaintext highlighter-rouge">assign</code> tags. So you cannot write a truthy conditional expression and assign it to variable expecting it to be set as <code class="language-plaintext highlighter-rouge">true</code> or <code class="language-plaintext highlighter-rouge">false</code>. If you need that, you can write:</p> <figure class="highlight"><pre><code class="language-liquid" data-lang="liquid"><span class="p">{%-</span><span class="w"> </span><span class="kr">if</span><span class="w"> </span><span class="nv">a</span><span class="w"> </span><span class="ow">or</span><span class="w"> </span><span class="nv">b</span><span class="w"> </span><span class="ow">or</span><span class="w"> </span><span class="nv">c</span><span class="w"> </span><span class="p">-%}</span> <span class="p">{%-</span><span class="w"> </span><span class="nt">assign</span><span class="w"> </span><span class="nv">my-boolean-flag</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kc">true</span><span class="w"> </span><span class="p">-%}</span> <span class="p">{%-</span><span class="w"> </span><span class="kr">else</span><span class="w"> </span><span class="p">-%}</span> <span class="p">{%-</span><span class="w"> </span><span class="nt">assign</span><span class="w"> </span><span class="nv">my-boolean-flag</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kc">false</span><span class="w"> </span><span class="p">-%}</span> <span class="p">{%-</span><span class="w"> </span><span class="kr">endif</span><span class="w"> </span><span class="p">-%}</span></code></pre></figure> <h3 id="truthiness-and-falsiness">Truthiness and falsiness</h3> <p>In Liquid, the <a href="https://shopify.github.io/liquid/basics/truthy-and-falsy/"><em>only conditional expressions that evaluate to false</em> are <code class="language-plaintext highlighter-rouge">false</code> and <code class="language-plaintext highlighter-rouge">nil</code></a>. Unlike other languages, in Liquid even the empty string (<code class="language-plaintext highlighter-rouge">''</code>) and the number zero (<code class="language-plaintext highlighter-rouge">0</code>) evaluate to <code class="language-plaintext highlighter-rouge">true</code>!</p> <details><summary>Table of truthy and falsy example expressions</summary> <table class="left"> <thead> <tr> <th>Expression</th> <th>truthiness</th> </tr> </thead> <tbody> <tr> <td><code class="language-plaintext highlighter-rouge">"have a cow"</code></td> <td>true</td> </tr> <tr> <td><code class="language-plaintext highlighter-rouge">""</code></td> <td>true</td> </tr> <tr> <td><code class="language-plaintext highlighter-rouge">0</code></td> <td>true</td> </tr> <tr> <td><code class="language-plaintext highlighter-rouge">1</code></td> <td>true</td> </tr> <tr> <td><code class="language-plaintext highlighter-rouge">false</code></td> <td>false</td> </tr> <tr> <td><code class="language-plaintext highlighter-rouge">"false"</code></td> <td>true</td> </tr> <tr> <td><code class="language-plaintext highlighter-rouge">nil</code></td> <td>false</td> </tr> <tr> <td><code class="language-plaintext highlighter-rouge">nil or ""</code></td> <td>true</td> </tr> <tr> <td><code class="language-plaintext highlighter-rouge">nil or "" or "hello" or "goodbye"</code></td> <td>true</td> </tr> <tr> <td><code class="language-plaintext highlighter-rouge">"" or "hello" or "goodbye"</code></td> <td>true</td> </tr> <tr> <td><code class="language-plaintext highlighter-rouge">"hello" or "goodbye"</code></td> <td>true</td> </tr> <tr> <td><code class="language-plaintext highlighter-rouge">nil or ""</code></td> <td>true</td> </tr> <tr> <td><code class="language-plaintext highlighter-rouge">"" or nil</code></td> <td>true</td> </tr> <tr> <td><code class="language-plaintext highlighter-rouge">true or false</code></td> <td>true</td> </tr> <tr> <td><code class="language-plaintext highlighter-rouge">false or true</code></td> <td>true</td> </tr> <tr> <td><code class="language-plaintext highlighter-rouge">true or true</code></td> <td>true</td> </tr> <tr> <td><code class="language-plaintext highlighter-rouge">false or false</code></td> <td>false</td> </tr> <tr> <td><code class="language-plaintext highlighter-rouge">true or nil</code></td> <td>true</td> </tr> <tr> <td><code class="language-plaintext highlighter-rouge">nil or true</code></td> <td>true</td> </tr> <tr> <td><code class="language-plaintext highlighter-rouge">false or nil</code></td> <td>false</td> </tr> <tr> <td><code class="language-plaintext highlighter-rouge">nil or false</code></td> <td>false</td> </tr> <tr> <td><code class="language-plaintext highlighter-rouge">false or nil or true</code></td> <td>true</td> </tr> <tr> <td><code class="language-plaintext highlighter-rouge">nil or false or true</code></td> <td>true</td> </tr> <tr> <td><code class="language-plaintext highlighter-rouge">nil and ""</code></td> <td>false</td> </tr> <tr> <td><code class="language-plaintext highlighter-rouge">"" and nil</code></td> <td>false</td> </tr> <tr> <td><code class="language-plaintext highlighter-rouge">true and false</code></td> <td>false</td> </tr> <tr> <td><code class="language-plaintext highlighter-rouge">false and true</code></td> <td>false</td> </tr> <tr> <td><code class="language-plaintext highlighter-rouge">true and true</code></td> <td>true</td> </tr> <tr> <td><code class="language-plaintext highlighter-rouge">false and false</code></td> <td>false</td> </tr> <tr> <td><code class="language-plaintext highlighter-rouge">true and nil</code></td> <td>false</td> </tr> <tr> <td><code class="language-plaintext highlighter-rouge">nil and true</code></td> <td>false</td> </tr> <tr> <td><code class="language-plaintext highlighter-rouge">false and nil</code></td> <td>false</td> </tr> <tr> <td><code class="language-plaintext highlighter-rouge">nil and false</code></td> <td>false</td> </tr> <tr> <td><code class="language-plaintext highlighter-rouge">false and nil and true</code></td> <td>false</td> </tr> <tr> <td><code class="language-plaintext highlighter-rouge">nil and false and true</code></td> <td>false</td> </tr> </tbody> </table> </details> <h3 id="order-of-operations">Order of operations</h3> <p>Unlike other languages, the <code class="language-plaintext highlighter-rouge">and</code> and <code class="language-plaintext highlighter-rouge">or</code> operators in Liquid have the same precedence. And even more surprisingly, Liquid <a href="https://shopify.dev/docs/themes/liquid/reference/basics/operators#order-of-operations">evaluates conditionals from right to left with equal operator precedence</a>.</p> <p>Here is an example:</p> <div class="example"> <div> <p>Code</p> <figure class="highlight"><pre><code class="language-liquid" data-lang="liquid"><span class="p">{%-</span><span class="w"> </span><span class="kr">if</span><span class="w"> </span><span class="kc">nil</span><span class="w"> </span><span class="ow">and</span><span class="w"> </span><span class="s1">'me'</span><span class="w"> </span><span class="ow">or</span><span class="w"> </span><span class="s1">'yes'</span><span class="w"> </span><span class="ow">and</span><span class="w"> </span><span class="s1">'OK'</span><span class="w"> </span><span class="p">-%}</span> Oh yes I did! <span class="p">{%-</span><span class="w"> </span><span class="kr">else</span><span class="w"> </span><span class="p">-%}</span> Oh no you didn't! <span class="p">{%-</span><span class="w"> </span><span class="kr">endif</span><span class="w"> </span><span class="p">-%}</span></code></pre></figure> </div> <div> <p>Result</p> <div> <p>Oh no you didn’t!</p> </div> </div> </div> <p>Here is a breakdown of how Liquid is evaluating the above:</p> <p>→ <code class="language-plaintext highlighter-rouge">nil and ('me' or ('yes' and 'OK'))</code><br /> → <code class="language-plaintext highlighter-rouge">nil and ('me' or true)</code><br /> → <code class="language-plaintext highlighter-rouge">nil and true</code><br /> → <code class="language-plaintext highlighter-rouge">false</code></p> <p>The parentheses above are merely for illustration; <em>Liquid does not support parentheses in conditional expressions</em> and your expression will be wrongly evaluated if you try to use them.</p> <p>In most other languages such as Python or JavaScript, it would be <code class="language-plaintext highlighter-rouge">true</code>:</p> <div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nx">$</span> <span class="nx">js</span> <span class="o">></span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="kc">null</span> <span class="o">&&</span> <span class="dl">'</span><span class="s1">me</span><span class="dl">'</span> <span class="o">||</span> <span class="dl">'</span><span class="s1">yes</span><span class="dl">'</span> <span class="o">&&</span> <span class="dl">'</span><span class="s1">OK</span><span class="dl">'</span> <span class="p">?</span> <span class="dl">'</span><span class="s1">true</span><span class="dl">'</span> <span class="p">:</span> <span class="dl">'</span><span class="s1">false</span><span class="dl">'</span><span class="p">)</span> <span class="kc">true</span> </code></pre></div></div> <div class="language-python highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="err">$</span> <span class="n">python</span> <span class="o">>>></span> <span class="k">print</span><span class="p">(</span><span class="s">'true'</span> <span class="k">if</span> <span class="bp">None</span> <span class="ow">and</span> <span class="s">'me'</span> <span class="ow">or</span> <span class="s">'yes'</span> <span class="ow">and</span> <span class="s">'OK'</span> <span class="k">else</span> <span class="s">'false'</span><span class="p">)</span> <span class="n">true</span> </code></pre></div></div> <p><img src="https://thumbs.gfycat.com/OblongJaggedBluemorphobutterfly-small.gif" alt="" /></p> </div> </div> </section>  <section id="footer"> <ul class="icons"> <li><a href="https://forum.image.sc/tag/imagej" class="icon alt"><img src="/media/icons/image-sc.png" width="24" style="vertical-align: middle; margin-top: -10px"><span class="label">Forum</span></a></li> <li><a href="https://twitter.com/hashtag/ImageJ" class="icon brands alt fa-twitter"><span class="label">Twitter</span></a></li> <li><a href="https://github.com/imagej" class="icon brands alt fa-github"><span class="label">GitHub</span></a></li> </ul> <ul class="copyright"> <li>Design: <a href="http://html5up.net">HTML5 UP</a></li> </ul> </section>  <nav role="navigation"> <div id="ham-toggle"> <input type="checkbox" /> <span></span>  <span></span>  <span></span>  <ul id="ham-menu"> <div class="menu"><h3>ImageJ Docs</h3> <ul> <li><a href="/downloads">Download</a></li> <li><details><summary>Learn</summary><ul> <li><details><summary><a href="/learn">ImageJ Basics</a></summary><ul> <li><a href="/tutorials">Tutorials</a></li> <li><a href="/learn/user-guides">User Guides</a></li> <li><a href="/learn/keyboard-shortcuts">Keyboard Shortcuts</a></li> <li><a href="/learn/tips-and-tricks">Tips and Tricks</a></li> <li><a href="/learn/troubleshooting">Troubleshooting</a></li> <li><a href="/learn/faq">Frequently Asked Questions</a></li> <li><details><summary><a href="/platforms">Supported Platforms</a></summary><ul> <li><a href="/platforms/windows">Windows</a></li> <li><a href="/platforms/macos">MacOS</a></li> <li><a href="/platforms/linux">Linux</a></li> <li><a href="/platforms/pi">Raspberry Pi</a></li> <li><a href="/platforms/android">Android</a></li> </ul></details></li>  <li><details><summary><a href="/formats">File Formats</a></summary><ul> <li><a href="/formats/bio-formats">Bio-Formats</a></li> <li><a href="/formats/video">Video formats</a></li> <li><a href="/formats/quicktime">QuickTime</a></li> <li><a href="/formats/tiff">TIFF</a></li> <li><a href="/formats/pdf">PDF</a></li> <li><a href="/formats/dicom">DICOM</a></li> <li><a href="/formats/lsm">Zeiss LSM</a></li> <li><a href="/formats/olympus">Olympus VSI</a></li> <li><a href="/formats/lurawave">Opera Flex</a></li> <li><a href="/formats/fib-sem">FIB-SEM</a></li> </ul></details></li>  </ul></details></li>  <li><details><summary><a href="/imaging">Scientific Imaging</a></summary><ul> <li><a href="/imaging/principles">Principles of Scientific Imaging</a></li> <li><a href="/imaging/annotating-images">Annotating Images</a></li> <li><a href="/imaging/colocalization-analysis">Colocalization</a></li> <li><a href="/imaging/color-image-processing">Color Image Processing</a></li> <li><a href="/imaging/deconvolution">Deconvolution</a></li> <li><a href="/imaging/image-intensity-processing">Image Intensity Processing</a></li> <li><a href="/imaging/particle-analysis">Particle Analysis</a></li> <li><a href="/imaging/registration">Registration</a></li> <li><a href="/imaging/segmentation">Segmentation</a></li> <li><a href="/imaging/stack-slice-manipulations">Stack-slice Manipulations</a></li> <li><a href="/imaging/t-functions">T-functions</a></li> <li><a href="/imaging/tracking">Tracking</a></li> <li><a href="/imaging/visualization">Visualization</a></li> <li><a href="/imaging/z-functions">Z-functions</a></li> </ul></details></li>  </ul></details></li>  <li><details><summary><a href="/plugins">Extend</a></summary><ul> <li><a href="/list-of-extensions">List of Extensions</a></li> <li><details><summary><a href="/update-sites">Update Sites</a></summary><ul> <li><a href="/list-of-update-sites">List of Update Sites</a></li> <li><a href="/update-sites/following">Following an Update Site</a></li> <li><a href="/update-sites/setup">Creating an Update Site</a></li> <li><a href="/update-sites/tos">Terms of Service</a></li> <li><a href="/update-sites/automatic-uploads">Automatic Upload</a></li> <li><a href="/update-sites/core-uploads">Uploading to Core Sites</a></li> <li><a href="/update-sites/faq">Update Sites FAQ</a></li> <li><a href="/update-sites/stats">Statistics</a></li> </ul></details></li>  <li><details><summary><a href="/scripting">Scripting</a></summary><ul> <li><a href="/scripting/basics">Scripting Basics</a></li> <li><a href="/scripting/script-editor">Script Editor</a></li> <li><a href="/scripting/parameters">Parameters</a></li> <li><a href="/scripting/user-input">User Input</a></li> <li><a href="/scripting/auto-imports">Auto Import</a></li> <li><a href="/scripting/templates">Templates</a></li> <li><a href="/scripting/batch">Batch Processing</a></li> <li><a href="/scripting/headless">Running Headlessly</a></li> <li><a href="/scripting/comparisons">Scripting Comparisons</a></li> <li><a href="/scripting/toolbox">Toolbox</a></li> <li><details><summary>Languages</summary><ul> <li><a href="/scripting/beanshell">BeanShell Scripting</a></li> <li><a href="/scripting/groovy">Groovy Scripting</a></li> <li><a href="/scripting/macro">ImageJ Macro</a></li> <li><a href="/scripting/javascript">JavaScript</a></li> <li><a href="/scripting/clojure">Lisp (Clojure)</a></li> <li><a href="/scripting/matlab">MATLAB</a></li> <li><a href="/scripting/jython">Python (Jython)</a></li> <li><a href="/scripting/python">Python (native)</a></li> <li><a href="/scripting/renjin">R (Renjin)</a></li> <li><a href="/scripting/jruby">Ruby (JRuby)</a></li> <li><a href="/scripting/scala">Scala Scripting</a></li> </ul></details></li>  </ul></details></li>  <li><details><summary><a href="/develop">Development</a></summary><ul> <li><a href="/develop/philosophy">Philosophy</a></li> <li><a href="/develop/architecture">Architecture</a></li> <li><a href="/develop/source">Source code</a></li> <li><a href="/develop/project-management">Project management</a></li> <li><a href="/develop/coding-style">Coding style</a></li> <li><a href="/develop/javadoc">Using Javadoc</a></li> <li><a href="/develop/debugging">Debugging</a></li> <li><a href="/develop/wish-list">Wish list</a></li> <li><details><summary>Tools</summary><ul> <li><a href="/develop/github">GitHub</a></li> <li><a href="/develop/maven">Maven</a></li> <li><a href="/develop/ci">CI/CD</a></li> <li><a href="/develop/dotfiles">Dotfiles</a></li> <li><details><summary><a href="/develop/ides">IDEs</a></summary><ul> <li><a href="/develop/eclipse">Eclipse</a></li> <li><a href="/develop/netbeans">NetBeans</a></li> <li><a href="/develop/intellij">IntelliJ IDEA</a></li> <li><a href="/develop/command-line">Command Line</a></li> </ul></details></li> </ul></details></li>  <li><details><summary>Guides</summary><ul> <li><a href="/develop/plugins">Writing plugins</a></li> <li><a href="/develop/improving-the-code">Contributing to a plugin</a></li> <li><a href="/develop/releasing">Development lifecycle</a></li> <li><a href="/develop/building-a-pom">Building a POM</a></li> <li><a href="/develop/debugging-exercises">Hands-on debugging</a></li> <li><a href="/develop/writing-ops">Adding new ops</a></li> <li><a href="/develop/formats">Adding new formats</a></li> <li><a href="/develop/native-libraries">Using native libraries</a></li> <li><a href="/develop/tips">Tips for developers</a></li> <li><a href="/develop/cpp-tips">Tips for C++ developers</a></li> <li><a href="/develop/ij1-plugins">ImageJ 1.x plugins</a></li> <li><a href="/develop/versioning">Versioning</a></li> <li><a href="/develop/logging">Logging</a></li> <li><a href="/develop/uber-jars">Uber-JARs</a></li> </ul></details></li>  <li><details><summary><a href="/develop/git">Git</a></summary><ul> <li><a href="/develop/git/eclipse">Git in Eclipse (EGit)</a></li> <li><a href="/develop/git/mini-howto">Git mini howto</a></li> <li><a href="/develop/git/workshop">Git workshop</a></li> <li><a href="/develop/git/conflicts">Git conflicts</a></li> <li><a href="/develop/git/topic-branches">Git topic branches</a></li> <li><a href="/develop/git/notes">Git notes</a></li> <li><a href="/develop/git/reflogs">Git reflogs</a></li> <li><a href="/develop/git/submodules">Git submodules</a></li> <li><a href="/develop/git/pinpoint-regressions">How to pinpoint regressions</a></li> <li><a href="/develop/git/publish-a-repository">How to publish a git repository</a></li> <li><a href="/develop/git/extract-a-subproject">How to extract a subproject</a></li> </ul></details></li>  </ul></details></li>  </ul></details></li>  <li><details open><summary><a href="/contribute">Contribute</a></summary><ul> <li><a href="/contribute/citing">Citing</a></li> <li><a href="/people">Contributors</a></li> <li><a href="/orgs">Organizations</a></li> <li><a href="/contribute/governance">Governance</a></li> <li><a href="/contribute/funding">Funding</a></li> <li><a href="/contribute/fiji">Contributing to Fiji</a></li> <li><details><summary><a href="/licensing">Licensing</a></summary><ul> <li><details><summary><a href="/licensing/open-source">Open Source</a></summary><ul> <li><a href="/licensing/apache">Apache</a></li> <li><a href="/licensing/bsd">BSD</a></li> <li><a href="/licensing/epl">EPL</a></li> <li><a href="/licensing/gpl">GPL</a></li> <li><a href="/licensing/lgpl">LGPL</a></li> <li><a href="/licensing/mit">MIT</a></li> <li><a href="/licensing/public-domain">Public domain</a></li> <li><a href="/licensing/big">BIG</a></li> </ul></details></li>  <li><a href="/licensing/closed-source">Proprietary</a></li> </ul></details></li>  <li><details open><summary><a href="/editing">Editing the Wiki</a></summary><ul> <li><a href="/editing/advanced">Advanced Editing</a></li> <li><a href="/editing/buttons">Buttons</a></li> <li><a href="/editing/citations">Citations</a></li> <li><a href="/editing/code">Source Code</a></li> <li><a href="/editing/debugging">Debugging</a></li> <li><a href="/editing/headers">Headers</a></li> <li><a href="/editing/icons">Icons</a></li> <li><a href="/editing/images">Images</a></li> <li><a href="/editing/keys">Keyboard Shortcuts</a></li> <li><a href="/editing/linking">Linking</a></li> <li><a href="/editing/math">Math Expressions</a></li> <li><a href="/editing/menu-paths">Menu Paths</a></li> <li><a href="/editing/navigation">Navigation</a></li> <li><a href="/editing/notices">Notices</a></li> <li><a href="/editing/people">People</a></li> <li><a class="current-page">Pitfalls</a></li> <li><a href="/editing/quizzes">Quizzes</a></li> <li><a href="/editing/statbox">Statbox</a></li> <li><a href="/editing/symbols">Symbols</a></li> <li><a href="/editing/tables">Tables</a></li> <li><a href="/editing/timelines">Timelines</a></li> <li><a href="/editing/tooltips">Tooltips</a></li> <li><a href="/editing/videos">Videos</a></li> <li><a href="/editing/whitespace">Whitespace</a></li> </ul></details></li>  </ul></details></li>  <li><details><summary><a href="/discuss">Discuss</a></summary><ul> <li><a href="/discuss/bugs">Reporting Issues</a></li> <li><a href="/discuss/mailing-lists">Mailing Lists</a></li> <li><a href="/discuss/chat">Chat</a></li> </ul></details></li>  <li><details><summary>Explore</summary><ul> <li><a href="/news">News</a></li> <li><details><summary><a href="/events">Events</a></summary><ul> <li><a href="/events/presentations">Presentations</a></li> <li><a href="/events/conferences">Conferences</a></li> <li><a href="/events/hackathons">Hackathons</a></li> <li><a href="/events">More...</a></li> </ul></details></li>  <li><details><summary><a href="/libs">Libraries</a></summary><ul> <li><a href="/libs/imagej-ops">ImageJ Ops</a></li> <li><a href="/libs/imagej-common">ImageJ Common</a></li> <li><a href="/libs/imagej-legacy">ImageJ Legacy</a></li> <li><a href="/libs/scijava">SciJava</a></li> <li><a href="/libs/scifio">SCIFIO</a></li> <li><details><summary><a href="/libs/imglib2">ImgLib2</a></summary><ul> <li><a href="/libs/imglib2/getting-started">Getting Started</a></li> <li><a href="/libs/imglib2/accessors">Accessors</a></li> <li><a href="/libs/imglib2/accessibles">Accessibles</a></li> <li><a href="/libs/imglib2/examples">Examples</a></li> <li><a href="/libs/imglib2/workshop-introductory">Introductory Workshop</a></li> <li><a href="/libs/imglib2/workshop-advanced">Advanced Workshop</a></li> <li><a href="/libs/imglib2/matlab">ImgLib2 images in MATLAB</a></li> <li><a href="/libs/imglib2/benchmarks">Benchmarks</a></li> <li><a href="/libs/imglib2/faq">FAQ</a></li> <li><a href="/libs/imglib2/developing">Developing ImgLib2</a></li> <li><a href="/libs/imglib2/discussion">ImgLib2 Discussion</a></li> </ul></details></li>  <li><a href="/libs">More...</a></li> </ul></details></li>  <li><details><summary><a href="/software">Software</a></summary><ul> <li><a href="/software/nih-image">NIH Image</a></li> <li><a href="/software/imagej">ImageJ</a></li> <li><a href="/software/imagej2">ImageJ2</a></li> <li><a href="/software/fiji">Fiji</a></li> <li><a href="/software">More...</a></li> </ul></details></li>  </ul></details></li>  </ul> </div> </ul> </div> </nav> <div id="dock-overlay-left" class="dock-overlay" data-dock-target="left-column"></div> <div id="dock-overlay-right" class="dock-overlay" data-dock-target="right-column"></div>  <div id="search-results"> <div id="search-hits"></div> <div id="pagination"></div> </div>   <script src="/assets/js/jquery.min.js"></script> <script src="/assets/js/jquery.scrolly.min.js"></script> <script src="/assets/js/browser.min.js"></script> <script src="/assets/js/breakpoints.min.js"></script> <script src="/assets/js/util.js"></script> <script src="/assets/js/jquery.toc.js"></script> <script src="/assets/js/lightbox.min.js"></script>   <script src="/assets/js/main.js"></script> <script src="/assets/js/dock.js"></script> <script src="/assets/js/code.js"></script>  <script src="https://cdn.jsdelivr.net/npm/anchor-js/anchor.min.js"></script> <script>anchors.add('#page h1, #page h2, #page h3, #page h4, #page h5, #page h6');</script>  <script src="https://cdn.jsdelivr.net/npm/citation-js@0.4.0-9"></script> <script src="/assets/js/cite.js"></script>  <script src="https://cdn.jsdelivr.net/npm/algoliasearch@4.13.0/dist/algoliasearch-lite.umd.js"></script> <script src="https://cdn.jsdelivr.net/npm/instantsearch.js@4.40.3/dist/instantsearch.production.min.js"></script> <script src="/assets/js/search.js"></script> <script src="/assets/js/search-tweaks.js"></script> </body> </html>

CINXE.COM

Pitfalls