Asciidoctor Browser Extension Documentation

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Asciidoctor Browser Extension Documentation | Asciidoctor Docs</title> <link rel="stylesheet" href="../_/css/site.css"> <meta name="generator" content="Antora 3.1.8"> <link rel="canonical" href="https://docs.asciidoctor.org/browser-extension/"> <meta property="og:url" content="https://docs.asciidoctor.org/browser-extension/"> <meta name="description" content="A brief introduction to the Asciidoctor Browser Extension."> <meta property="og:description" content="A brief introduction to the Asciidoctor Browser Extension."> <meta property="og:site_name" content="Asciidoctor Docs"> <meta name="twitter:card" content="summary_large_image"> <meta property="og:title" content="Browser Extension - Asciidoctor Browser Extension Documentation"> <meta property="og:image" content="https://docs.asciidoctor.org/_/img/asciidoctor-og.png"> <meta name="twitter:site" content="@asciidoctor"> <link rel="next" href="install/"> <meta name="page-spec" content="browser-extension::index.adoc"> <link rel="icon" href="../_/img/favicon.ico" type="image/x-icon"> </head> <body class="article"> <header class="header"> <nav class="navbar"> <div class="navbar-brand"> <a class="navbar-item logo" title="Asciidoctor" href="https://asciidoctor.org"><img src="../_/img/asciidoctor-logo.svg" alt="Asciidoctor" width="48"></a> <a class="navbar-item title" href="https://docs.asciidoctor.org/">Asciidoctor Docs</a> <button class="navbar-burger" aria-controls="topbar-nav" aria-expanded="false" aria-label="Toggle main menu"> <span></span> <span></span> <span></span> </button> </div> <div id="topbar-nav" class="navbar-menu"> <div class="navbar-end"> <div class="navbar-item search hide-for-print"> <div id="search" class="field has-filter"> <input class="query" type="text" placeholder="Search the docs"> <label class="filter checkbox"> <input type="checkbox" data-facet-filter="component:browser-extension"> In this project </label> </div> </div> <div class="navbar-item has-dropdown is-hoverable"> <div class="navbar-link">AsciiDoc</div> <div class="navbar-dropdown"> <a class="navbar-item" href="../asciidoc/latest/">Language</a> <a class="navbar-item" href="../asciidoc/latest/syntax-quick-reference/">Syntax Quick Reference</a> </div> </div> <div class="navbar-item has-dropdown is-hoverable"> <div class="navbar-link">Processing</div> <div class="navbar-dropdown"> <a class="navbar-item" href="../asciidoctor/latest/">Asciidoctor <small>Ruby</small></a> <a class="navbar-item" href="../asciidoctor.js/latest/">Asciidoctor.js <small>JavaScript</small></a> <a class="navbar-item" href="../asciidoctorj/latest/">AsciidoctorJ <small>Java</small></a> </div> </div> <div class="navbar-item has-dropdown is-hoverable"> <div class="navbar-link">Extensions</div> <div class="navbar-dropdown"> <div class="navbar-item">Add-on Converters</div> <a class="navbar-item" href="../pdf-converter/latest/">PDF <small>Ruby</small></a> <a class="navbar-item" href="../epub3-converter/latest/">EPUB3 <small>Ruby</small></a> <a class="navbar-item" href="../reveal.js-converter/latest/">reveal.js <small>Ruby, JavaScript</small></a> <hr class="navbar-divider"> <div class="navbar-item">Extended Syntax</div> <a class="navbar-item" href="../diagram-extension/latest/">Asciidoctor Diagram <small>Ruby</small></a> </div> </div> <div class="navbar-item has-dropdown is-hoverable"> <div class="navbar-link">Tooling</div> <div class="navbar-dropdown is-right"> <div class="navbar-item">Build Automation</div> <a class="navbar-item" href="../maven-tools/latest/">Maven Tools <small>Java</small></a> <a class="navbar-item" href="../gradle-plugin/latest/">Gradle Plugin <small>Java</small></a> <a class="navbar-item" href="../asciidoclet/latest/">Asciidoclet <small>Java</small></a> <hr class="navbar-divider"> <div class="navbar-item">Text Editors / Viewers</div> <a class="navbar-item" href="./">Browser Extension</a> <a class="navbar-item" href="https://intellij-asciidoc-plugin.ahus1.de/docs" target="_blank" rel="noopener">IntelliJ Plugin</a> </div> </div> <div class="navbar-item has-dropdown is-hoverable"> <a class="navbar-item" href="../about/get-help/" data-title="Support"> <span class="icon"><img src="../_/img/octicons-24.svg#view-comment-discussion"></span> </a> <div class="navbar-dropdown is-right"> <a class="navbar-item has-icon" href="https://chat.asciidoctor.org" target="_blank" rel="noopener"> <span class="icon"><img src="../_/img/octicons-16.svg#view-comment-discussion"></span> <span>Chat</span> </a>  <a class="navbar-item has-icon" href="https://github.com/asciidoctor" target="_blank" rel="noopener"> <span class="icon"><img src="../_/img/octicons-16.svg#view-mark-github"></span> <span>Source</span> </a> <a class="navbar-item has-icon" href="https://twitter.com/asciidoctor" target="_blank" rel="noopener"> <span class="icon"><img src="../_/img/octicons-16.svg#view-hash"></span> <span>Tweets</span> </a> </div> </div> </div> </div> </nav> </header> <div class="body"> <div class="nav-container"> <aside class="nav"> <div class="panels"> <div class="nav-panel-menu is-active is-loading" data-panel="menu"> <nav class="nav-menu"> <button class="nav-menu-toggle" aria-label="Toggle expand/collapse all" style="display: none"></button> <h3 class="title"><a href="./">Browser Extension</a></h3> <ul class="nav-list"> <li class="nav-item" data-depth="0"> <ul class="nav-list"> <li class="nav-item" data-depth="1"> <a class="nav-link" href="install/">Install</a> </li> <li class="nav-item" data-depth="1"> <a class="nav-link" href="quickstart/">Quickstart</a> </li> <li class="nav-item" data-depth="1"> <a class="nav-link" href="features/">Features</a> </li> <li class="nav-item" data-depth="1"> <button class="nav-item-toggle"></button> <a class="nav-link" href="options/">Extension Options</a> <ul class="nav-list"> <li class="nav-item" data-depth="2"> <a class="nav-link" href="custom-attributes-option/">Custom attributes string</a> </li> <li class="nav-item" data-depth="2"> <a class="nav-link" href="diagrams-extension-option/">Diagrams extension</a> </li> <li class="nav-item" data-depth="2"> <a class="nav-link" href="theme-stylesheet-option/">Theme/Stylesheet</a> </li> <li class="nav-item" data-depth="2"> <a class="nav-link" href="javascript-option/">JavaScript</a> </li> <li class="nav-item" data-depth="2"> <a class="nav-link" href="load-the-javascript-option/">Load the JavaScript</a> </li> </ul> </li> <li class="nav-item" data-depth="1"> <a class="nav-link" href="diagrams-extension-quickstart/">Diagrams Extension Quickstart</a> </li> <li class="nav-item" data-depth="1"> <a class="nav-link" href="use-cases/">Use Cases</a> </li> <li class="nav-item" data-depth="1"> <a class="nav-link" href="firefox-known-issues/">Known issues</a> </li> </ul> </li> </ul> </nav> <script> ;(function () { var panel = document.querySelector('.nav-panel-menu') var page var hash = window.location.hash if (hash) { if (~hash.indexOf('%')) hash = decodeURIComponent(hash) if (~hash.indexOf('"')) hash = hash.replace(/(?=")/g, '\\') var link = panel.querySelector('.nav-link[href="' + hash + '"]') if (link) page = link.parentNode else if ((page = panel.querySelector('.is-current-url'))) page.classList.add('is-provisional') } else { page = panel.querySelector('.is-current-url') } if (page) { var ancestor = page while ((ancestor = ancestor.parentNode) && ancestor !== panel) { if (ancestor.className === 'nav-item') ancestor.classList.add('is-current-path', 'is-active') } page.classList.add('is-current-page', 'is-active') if (panel.scrollHeight > panel.clientHeight) { var panelRect = panel.getBoundingClientRect() var linkRect = page.querySelector('.nav-link').getBoundingClientRect() panel.scrollTop += Math.round(linkRect.top - panelRect.top - (panelRect.height - linkRect.height) * 0.5) } } else { panel.scrollTop = 0 } panel.classList.remove('is-loading') })() </script> </div> <div class="nav-panel-explore" data-panel="explore"> <div class="context"> <span class="title">Browser Extension</span> <span class="version"></span> </div> <ul class="components"> <li class="component"> <a class="title" href="../asciidoc/latest/">AsciiDoc</a> </li> <li class="component"> <a class="title" href="../asciidoctor/latest/">Asciidoctor</a> <ul class="versions"> <li class="version is-latest"> <a href="../asciidoctor/latest/">2.0</a> </li> </ul> </li> <li class="component"> <a class="title" href="../asciidoctor.js/latest/">Asciidoctor.js</a> <ul class="versions"> <li class="version is-latest"> <a href="../asciidoctor.js/latest/">3.0</a> </li> <li class="version"> <a href="../asciidoctor.js/2.2/">2.2</a> </li> </ul> </li> <li class="component"> <a class="title" href="../asciidoctorj/latest/">AsciidoctorJ</a> <ul class="versions"> <li class="version is-latest"> <a href="../asciidoctorj/latest/">3.0</a> </li> <li class="version"> <a href="../asciidoctorj/2.5/">2.5</a> </li> </ul> </li> <li class="component"> <a class="title" href="../pdf-converter/latest/">Asciidoctor PDF</a> <ul class="versions"> <li class="version is-latest"> <a href="../pdf-converter/latest/">2.3</a> </li> <li class="version"> <a href="../pdf-converter/2.2/">2.2</a> </li> <li class="version"> <a href="../pdf-converter/2.1/">2.1</a> </li> <li class="version"> <a href="../pdf-converter/2.0/">2.0</a> </li> </ul> </li> <li class="component"> <a class="title" href="../epub3-converter/latest/">Asciidoctor EPUB3</a> <ul class="versions"> <li class="version is-latest"> <a href="../epub3-converter/latest/">2.1</a> </li> </ul> </li> <li class="component"> <a class="title" href="../reveal.js-converter/latest/">Asciidoctor reveal.js</a> <ul class="versions"> <li class="version is-latest"> <a href="../reveal.js-converter/latest/">5.0</a> </li> <li class="version"> <a href="../reveal.js-converter/4.1/">4.1</a> </li> </ul> </li> <li class="component"> <a class="title" href="../maven-tools/latest/">Maven Tools</a> <ul class="versions"> <li class="version is-latest"> <a href="../maven-tools/latest/">3.1</a> </li> <li class="version"> <a href="../maven-tools/2.2/">2.2</a> </li> </ul> </li> <li class="component"> <a class="title" href="../gradle-plugin/latest/">Gradle Plugin Suite</a> <ul class="versions"> <li class="version is-latest"> <a href="../gradle-plugin/latest/">4.0</a> </li> </ul> </li> <li class="component"> <a class="title" href="../asciidoclet/latest/">Asciidoclet</a> <ul class="versions"> <li class="version is-latest"> <a href="../asciidoclet/latest/">2.0</a> </li> <li class="version"> <a href="../asciidoclet/1.5.6/">1.5.6</a> </li> </ul> </li> <li class="component"> <a class="title" href="../diagram-extension/latest/">Asciidoctor Diagram</a> <ul class="versions"> <li class="version is-latest"> <a href="../diagram-extension/latest/">2.2</a> </li> </ul> </li> <li class="component is-current"> <a class="title" href="./">Browser Extension</a> </li> <li class="component"> <a class="title" href="../about/">Community</a> </li> </ul> </div> </div> </aside> </div> <main class="article"> <div class="toolbar" role="navigation"> <button class="nav-toggle"></button> <a href="../" class="home-link" title="Home"></a> <nav class="breadcrumbs" aria-label="breadcrumbs"> <ul> <li><a href="./">Browser Extension</a></li> <li><a href="./" class="discrete">Introduction</a></li> </ul> </nav> <a class="project-link" href="https://github.com/asciidoctor/asciidoctor-browser-extension" title="Project home"><span class="icon"><img src="../_/img/octicons-16.svg#view-mark-github"></span></a> <div class="edit-this-page"><a href="https://github.com/asciidoctor/asciidoctor-browser-extension/edit/main/docs/modules/ROOT/pages/index.adoc">Edit this Page</a></div> </div> <div class="content"> <article class="doc browser-extension"> <h1 class="page">Asciidoctor Browser Extension Documentation</h1> <div class="paragraph"> <p>An AsciiDoc File Viewer, the Asciidoctor Browser Extension uses <a href="../asciidoctor.js/latest/" class="xref page">Asciidoctor.js</a> to view <a href="../asciidoc/latest/" class="xref page">AsciiDoc</a> files (.ad, .adoc, .asc, .asciidoc, and optionally .txt) as HTML inside Chrome, Brave, Firefox, Opera, Microsoft Edge and other Chromium-based browsers.</p> </div> <div class="paragraph"> <p>The Asciidoctor Browser Extension brings all the features of simple AsciiDoc markup directly to the browser such as: attributes (akin to variables), include files, conditional statements, admonitions, icons, stylesheets, automatic numbering of sections and lists, and more. With the Asciidoctor Browser Extension and simple AsciiDoc markup you can save time and effort in creating beautiful output from simple text.</p> </div> <div class="paragraph"> <p>The Asciidoctor Browser Extension is a both a viewer and previewer, depending upon your contexts (plural) of using it: from using the Asciidoctor Browser Extension as the only way to render and view collections of AsciiDoc files, to more complex environments.</p> </div> <div class="imageblock"> <div class="content"> <img src="_images/browsers-animated.webp" alt="browsers animated"> </div> </div> <div class="admonitionblock tip"> <table> <tr> <td class="icon"> <i class="fa icon-tip" title="Tip"></i> </td> <td class="content"> You can learn more about AsciiDoc and use an interactive editor at <a href="https://asciidoc.org" class="bare">asciidoc.org</a>. </td> </tr> </table> </div> <nav class="pagination"> <span class="next"><a href="install/">Install</a></span> </nav> </article> </div> </main> </div> <footer class="footer"> <div class="footer-main"> <figure class="footer-brand"> <a class="logo" href="https://asciidoctor.org" target="_blank" rel="noopener"><img src="../_/img/asciidoctor-logo.svg" alt="Asciidoctor" width="48"></a> <figcaption class="footer-brand-name"><a href="https://asciidoctor.org" target="_blank" rel="noopener">Asciidoctor</a></figcaption> </figure> <ul class="footer-brand-links">  <li><a href="https://docs.asciidoctor.org">Docs</a></li> <li><a href="https://chat.asciidoctor.org" target="_blank" rel="noopener">Chat</a></li> <li><a href="https://github.com/asciidoctor" target="_blank" rel="noopener">Source</a></li> <li><a href="https://discuss.asciidoctor.org" target="_blank" rel="noopener">List (archive)</a></li> </ul> <p class="footer-brand-follow"> <a href="https://twitter.com/asciidoctor" title="Follow us on Twitter" target="_blank" rel="noopener"><img src="../_/img/twitter-logo.svg" alt="Twitter logo" class="logo" width="28"><span class="handle">@asciidoctor</span></a> </p> </div> <div class="footer-legal"> <p>Copyright © 2024 Dan Allen, Sarah White, and individual Asciidoctor contributors. Except where noted, the content is licensed under a Creative Commons Attribution 4.0 International (CC BY 4.0) license.</p> <p>The <a href="https://github.com/asciidoctor/asciidoctor-docs-ui" target="_blank" rel="noopener">UI for this site</a> is derived from the Antora default UI and is licensed under the MPL-2.0 license. Several icons are imported from <a href="https://primer.style/octicons/" target="_blank" rel="noopener">Octicons</a> and are licensed under the MIT license.</p> <p>AsciiDoc® and AsciiDoc Language™ are trademarks of the Eclipse Foundation, Inc.</p> </div> <div class="footer-thanks"> <p>Thanks to our <a href="https://asciidoctor.org/supporters/" target="_blank" rel="noopener">backers</a> and <a href="https://asciidoctor.org/contributors/" target="_blank" rel="noopener">contributors</a> for helping to make this project possible. Additional thanks to:</p> <p class="badges"> <a href="https://opendevise.com" title="Development support by OpenDevise" target="_blank" rel="noopener"><img src="https://secure.gravatar.com/avatar/823717a797dbd78ceff7b26aa397f383.png?size=80" alt="OpenDevise Logo" width="30"></a> <a href="https://zulip.com" title="Chat powered by Zulip" target="_blank" rel="noopener"><img src="../_/img/zulip-logo.svg" alt="Zulip logo" width="30"></a> <a href="https://algolia.com/docsearch" title="Search by Algolia DocSearch" target="_blank" rel="noopener"><img src="../_/img/algolia-logo.svg" alt="Algolia logo" width="30"></a> <a href="https://netlify.com" title="Deploys by Netlify" target="_blank" rel="noopener"><img src="../_/img/netlify-logo.svg" alt="Deploys by Netlify" width="67"></a> </p> <p>Authored in <a href="https://asciidoc.org" target="_blank" rel="noopener">AsciiDoc</a>.<br>Produced by <a href="https://antora.org" target="_blank" rel="noopener">Antora</a> and <a href="https://asciidoctor.org" target="_blank" rel="noopener">Asciidoctor</a>.</p> </div> </footer> <script id="site-script" src="../_/js/site.js" data-ui-root-path="../_"></script> <script async src="../_/js/vendor/highlight.js"></script> <script async id="search-script" src="../_/js/vendor/docsearch.js" data-app-id="V1SEVEBOXX" data-api-key="02ab3d2d0cab4dec119447e14abdd3bc" data-index-name="asciidoctor-docs" data-stylesheet="../_/css/vendor/docsearch.css"></script> </body> </html>

CINXE.COM

Asciidoctor Browser Extension Documentation | Asciidoctor Docs