<!DOCTYPE html><html lang="dev"> <head> <meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black"><meta name="mobile-web-app-capable" content="yes"> <meta name="description" content="Best way to write and share your knowledge in markdown."><meta name="keywords" content="Collaborative, Markdown, Notes"><!-- Open Graph data --><meta property="og:title" content="HackMD - Collaborative Markdown Knowledge Base"><meta property="og:type" content="website"><meta property="og:url" content="https://hackmd.io"><meta property="og:description" content="Best way to write and share your knowledge in markdown."><meta property="og:site_name" content="HackMD"><meta property="og:image" content="https://hackmd.io/images/media/HackMD-og.jpg"> <meta property="fb:app_id" content="1436904003272070"> <!-- Twitter data --><meta name="twitter:site" content="@hackmdio" /><meta name="twitter:card" content="summary_large_image" /><meta name="twitter:title" content="HackMD - Collaborative Markdown Knowledge Base" /><meta name="twitter:description" content="Best way to write and share your knowledge in markdown." /><meta name="twitter:image:src" content="https://hackmd.io/images/media/HackMD-og.jpg" /><title>HackMD - Collaborative Markdown Knowledge Base</title> <meta name="csrf-token" content="a9oELv1E-EevPcTTxLX6smDg_CWfMSVzhBkg"><link rel="icon" type="image/png" href="https://hackmd.io/favicon.png"><link rel="apple-touch-icon" href="https://hackmd.io/apple-touch-icon.png"> <script nonce="27444481-72bd-4f32-89f0-591507a49a2a"> window.domain = 'hackmd.io' window.urlpath = '' window.debug = false window.version = '1.3.0' window.brand = 'HackMD' window.GOOGLE_API_KEY = 'AIzaSyCjSrqWHhmWJnoI7JlD88XDSaBgiKbaenA' window.GOOGLE_CLIENT_ID = '911617723593-drikdibvvn63slfd6kbqigo8ql1no55s.apps.googleusercontent.com' window.DROPBOX_APP_KEY = 'rdoizrlnkuha23r' window.PLANTUML_SERVER = 'https://ptuml.hackmd.io' window.ASSET_URL = 'https://assets.hackmd.io' window.USER_CAN_CREATE_TEAM = true window.USER_CAN_DELETE_ACCOUNT = true window.USER_DELETE_ACCOUNT_VIA_EMAIL = true window.PAYMENT_ENABLED = true window.PAYMENT_PROMOTION_BANNER_ENABLED = false window.GITHUB_SYNC_ENABLED = true window.GITLAB_SYNC_ENABLED = false window.GITLAB_SYNC_BASE_URL = '' window.VCS_SYNC_MODE = 'github' window.VCS_PROVIDER_NAME = 'GitHub' window.FREE_TEAM_NUM = 20 window.FREE_TEAM_MEMBER_NUM = 3 window.FREE_PUBLIC_TEAM_NUM = 10 window.EE_SITE_ENABLE = false window.EE_SITE_NAME = 'false' window.EE_SITE_LINK = 'false' window.EESITE_INFO = false window.ENTERPRISE_DISCOVERY_ENABLE = false window.ENTERPRISE_DISCOVERY_TEAM = true window.ENTERPRISE_DISCOVERY_NOTE = true window.ENTERPRISE_DISCOVERY_VIEW_PERMISSION = 'guest' window.ALLOW_ANONYMOUS = true window.ALLOW_ANONYMOUS_EDIT = false window.ALLOW_DOWNLOAD_PDF = true window.PUBLIC_OVERVIEW = false window.INTERNAL_PUBLIC_OVERVIEW = false window.FULL_TEXT_SEARCH_ENABLE = false window.ALGOLIA_SEARCH_ENABLE = true window.MARKETING_EMAIL_ENABLE = true window.OFFLINE_ACCESS = true window.WALLET_CONNECT_PROJECT_ID = '91d6fa182b725b5895a17a170a5878c1' window.API_MANAGEMENT_UI_ENABLE = true window.FEEDBACK_UI_ENABLE = true window.PUBLISH_ENABLE = true window.SHOW_HOT_NOTES = false window.HOT_NOTES_TIME_TYPE = 'week' window.SHOW_OVERVIEW = false window.TRASH_NOTE_DELETE_AFTER_FREE = 3 window.TRASH_NOTE_DELETE_AFTER_PAID = 30 window.ENABLED_PREVIEW_FEATURE = {} window.IMGUR_FALLBACK_CDN = 'https://imgur-backup.hackmd.io' window.CLOUD_META_UI = true window.CLOUD_META_API = true window.CLOUD_META_MIGRATION = false window.YAML_METADATA_ENABLED = false window.NOTE_CAPACITY_LIMIT = 50 window.DOCUMENT_MAX_LENGTH = 100000 window.SOCIAL_NETWORK_FEATURES_ENABLED = true window.PUBLISHMENT_MODERATION_ENABLED = true window.SUGGEST_EDIT_ENABLED = true window.REALTIME_CLIENT_WITH_CREDENTIALS = false window.DEBUG_DISCONNECT_SOCKET_WHEN_OFFLINE = false </script> <!-- Google Tag Manager --><script nonce="27444481-72bd-4f32-89f0-591507a49a2a">(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-KLW9Z3');</script><!-- End Google Tag Manager --> <link href="https://assets.hackmd.io/build/font-vendor.85aea95458609ff85035.css" rel="stylesheet"><link href="https://assets.hackmd.io/build/common-vendor.8badda337754ab1de336.css" rel="stylesheet"><link href="https://assets.hackmd.io/build/cover-vendor.2e9590c435e0258b55cb.css" rel="stylesheet"><link href="https://assets.hackmd.io/build/cover.c461a391e1dfbf9e44b8.css" rel="stylesheet"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --><!-- WARNING: Respond.js doesn't work if you view the page via file:// --><!--[if lt IE 9]> <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js" integrity="sha256-3Jy/GbSLrg0o9y5Z5n1uw0qxZECH7C6OQpVBgNFYa0g=" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js" integrity="sha256-g6iAfvZp+nDQ2TdTR/VVKJf3bGro4ub5fvWSWVRi2NE=" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.5.9/es5-shim.min.js" integrity="sha256-8E4Is26QH0bD52WoQpcB+R/tcWQtpzlCojrybUd7Mxo=" crossorigin="anonymous"></script><![endif]--> <style> .grecaptcha-badge { visibility: hidden; }</style> <script defer data-domain="hackmd.io" src="https://plausible.io/js/script.js"></script><script nonce="27444481-72bd-4f32-89f0-591507a49a2a"> window.plausible = window.plausible || function() { (window.plausible.q = window.plausible.q || []).push(arguments); } const keyboardWhiteList = ['a', 'span', 'button'] function getTaggedEventAttributes (e) { const eventAttrs = { name: null, props: {} } if (!e || !e.classList) return eventAttrs const psEvent = /plausible-event-(.+)(=|--)(.+)/ for (const className of [...e.classList]) { const [, key, , val] = className.match(psEvent) || [] if (!key || !val) continue const value = val.replace(/\+/g, ' ') switch (key.toLowerCase()) { case 'name': eventAttrs.name = value break default: eventAttrs.props[key] = value break } } return eventAttrs } function isLocal () { return /^localhost$|^127(\.[0-9]+){0,2}\.[0-9]+$|^\[::1?\]$/.test(location.hostname) || location.protocol === 'file:' } function isAutomation () { return Boolean(window._phantom || window.__nightmare || window.navigator.webdriver || window.Cypress) } function shouldIgnore () { return isLocal() || isAutomation() || window.localStorage.getItem('plausible_ignore') === 'true' } function handler (e) { if (!window.plausible) return if (!e.target || !('className' in e.target)) return const ele = e.target const eventAttrs = getTaggedEventAttributes(ele) if (!eventAttrs.name) return if (ele?.href) eventAttrs.props.url = ele.href if (shouldIgnore()) { if (window.debug) { console.warn( `Ignoring Event: "${eventAttrs.name}"`, { props: eventAttrs.props }, ) } return } window.plausible(eventAttrs.name, { props: eventAttrs.props }) } function keydownHandler (e) { if (e.key !== 'Enter') return if (e.target.nodeName.toLowerCase() === 'input') { switch (e.target.type.toLowerCase()) { case 'submit': case 'button': case 'reset': case 'checkbox': case 'radio': case 'file': case 'image': case 'color': break default: return } } else if (!keyboardWhiteList.includes(e.target.nodeName.toLowerCase())) { return } handler(e) } document.addEventListener('mousedown', handler) document.addEventListener('keydown', keydownHandler)</script> </head> <body> <header class="sticky z-50 flex items-center justify-between w-full px-6 py-3 top-0 lg:px-10 md:px-8 bg-black-brand hackmd-navbar"> <a class="font-bold text-9 hover:no-underline hover:text-gray-300" href="https://hackmd.io/home"> <i class="fa fa-file-text"></i> HackMD </a> <button type="button" class="border-none outline-none ui-navbar-toggle bg-black-brand text-5 lg:hidden" aria-expanded="false"> <i class="fa fa-bars"></i> </button> <!-- Backdrop --> <div class="fixed top-0 left-0 w-full h-full bg-gray-900 backdrop opacity-70 lg:hidden"></div> <nav class="fixed top-0 right-0 h-full pt-16 transition-transform lg:block lg:relative bg-black-brand lg:p-0 w-50 lg:w-auto drop-shadow-md lg:drop-shadow-none"> <span class="absolute cursor-pointer right-5 top-3 lg:hidden navbar-close"> <img src="https://hackmd.io/images/home/group.svg"> </span> <ul class="fixed z-10 flex flex-col items-start justify-start w-full gap-4 pl-0 mb-0 font-semibold list-none lg:flex text-5 lg:gap-6 lg:justify-center lg:flex-row lg:items-center lg:relative lg:w-auto xl:gap-8 2xl:gap-10"> <li> <a class="px-8 hover:no-underline hover:text-gray-300 lg:px-0" target="_blank" href="https://hackmd.io/c/tutorials"> Tutorials </a> </li> <li> <a class="px-8 hover:no-underline hover:text-gray-300 lg:px-0" href="https://hackmd.io/pricing"> Pricing </a> </li> <li> <a class="px-8 hover:no-underline hover:text-gray-300 lg:px-0" href="https://hackmd.io/enterprise"> Enterprise </a> </li> <li> <a class="px-8 hover:no-underline hover:text-gray-300 lg:px-0" href="https://blog.hackmd.io?utm_source=home&utm_medium=nav-bar" target="_blank" rel="noreferrer noopener"> Blog </a> </li> <li> <a class="px-8 hover:no-underline hover:text-gray-300 lg:px-0" href="https://blog.hackmd.io/changelog?utm_source=home&utm_medium=nav-bar" target="_blank" rel="noreferrer noopener"> Changelog </a> </li> <li class="bg-gray-800 lg:block tw-hidden" style="width: 1px; height: 26px;"></li> <li class="block w-full bg-gray-800 lg:hidden" style="height: 1px;"></li> <li class="ui-home-recent"> <a class="px-8 hover:no-underline hover:text-gray-300 lg:px-0" href="https://hackmd.io/recent"> Recent </a> </li> <li class="ui-home-login"> <a class="px-8 hover:no-underline hover:text-gray-300 lg:px-0" href="https://hackmd.io/login"> Sign in </a> </li> </ul> </nav></header> <div id="site-content" class="site-wrapper hmd-pt-1/4" style="padding-top: 50px;"> <div id="home"> <div class="container"> </div> <div class="container home-container hmd-pt-3-xs hmd-pb-10-xs hmd-pt-9-md hmd-pb-16-md"> <div class="row hmd-mb-18"> <div class="col-xs-12"> <h1 class="cover-heading hmd-ma-0">Get everyone on the same page with Markdown</h1> <p class="lead hmd-ma-0" style="max-width: 680px; margin: auto; margin-bottom: 30px;"> Real-time collaborate on <span class="typewriter-container inline-flex hmd-justify-center en"> <span class="typewriter-text typewriter-text-1">project</span> <span class="typewriter-text typewriter-text-2">team</span> <span class="typewriter-text typewriter-text-3">technical</span> <span class="typewriter-text typewriter-text-4">personal</span> </span> documentation in markdown. Capture fleeting ideas and formalize tribal knowledge. </p> <form action="https://hackmd.io/join" class="input-group hmd-mt-3" method="get" style="display: flex; max-width: 680px; margin: auto;"> <input type="email" name="email" class="form-control ui-home-email" placeholder="Enter your email"> <div class="input-group-append"> <button type="submit" class="btn btn-success btn-lg ui-home-join plausible-event-name=HomeHeroEmail">Sign-up</button> </div> </form> </div> </div></div> <div class="home-container hmd-bg-white"> <div id="carouselFirstIndicators" class="carousel slide row" data-ride="carousel"> <div class="col-xs-12 visible-xs"> <h1 class="section-title"> <div>Effective team collaboration</div> <div>Flexible permissioning</div> </h1> </div> <div class="col-xs-12 col-md-6 hmd-mb-3-xs hmd-mb-0-md"> <div class="carousel-inner pull-right" style="width: auto;"> <div class="item active"> <img src="https://hackmd.io/images/home/IndexPic_1-1.svg" class="d-block hmd-w-100" alt="Slide 1"> </div> <div class="item"> <img src="https://hackmd.io/images/home/IndexPic_1-2.svg" class="d-block hmd-w-100" alt="Slide 2"> </div> <div class="item"> <img src="https://hackmd.io/images/home/IndexPic_1-3.svg" class="d-block hmd-w-100" alt="Slide 3"> </div> </div> </div> <div class="col-xs-12 col-md-6 hmd-text-left"> <h1 class="section-title hidden-xs"> <div>Effective team collaboration</div> <div>Flexible permissioning</div> </h1> <div class="carousel-indicators"> <div class="carousel-item active" data-target="#carouselFirstIndicators" data-slide-to="0"> <img src="https://hackmd.io/images/home/index-team-value-01.svg" class="icon"> <div> <div class="title">Transcend beyond space and time</div> <div class="content">Blazing fast real-time collaboration breaks the space between members. Change notification keeps everyone posted.</div> </div> </div> <div class="carousel-item" data-target="#carouselFirstIndicators" data-slide-to="1"> <img src="https://hackmd.io/images/home/index-team-value-02.svg" class="icon"> <div> <div class="title">Sharing is caring</div> <div class="content">Team workspace for bird’s-eye view over all team documents. Shared templates keep format and styling consistent.</div> </div> </div> <div class="carousel-item" data-target="#carouselFirstIndicators" data-slide-to="2"> <img src="https://hackmd.io/images/home/index-team-value-03.svg" class="icon"> <div> <div class="title">Keep your secret (while sharing it)</div> <div class="content">Granular note permission settings and private image storage give you full control over how and with whom you share.</div> </div> </div> </div> </div> </div> <div class="row hmd-pt-2"> <div class="col-xs-12 hmd-text-right button-container"> <a href="https://hackmd.io/join?create-team=true" class="ui-home-create-team plausible-event-name=HomeCreateFreeTeam btn btn-lg btn-primary" style="min-width: 145px;">Create a free team</a> </div> </div> </div> <div class="home-container hmd-bg-white hmd-pt-0"> <div id="carouselSecondIndicators" class="carousel reverse slide row" data-ride="carousel"> <div class="col-xs-12 visible-xs"> <h1 class="section-title"> <div>Your own tools</div> <div>Own your contents</div> </h1> </div> <div class="col-xs-12 col-md-6"> <div class="carousel-inner pull-right" style="width: auto;"> <div class="item active"> <img src="https://hackmd.io/images/home/IndexPic_2-1.svg" class="d-block hmd-w-100" alt="Slide 1"> </div> <div class="item"> <img src="https://hackmd.io/images/home/IndexPic_2-3.svg" class="d-block hmd-w-100" alt="Slide 2"> </div> <div class="item"> <img src="https://hackmd.io/images/home/IndexPic_2-2.svg" class="d-block hmd-w-100" alt="Slide 3"> </div> </div> </div> <div class="col-xs-12 col-md-6 hmd-text-left"> <h1 class="section-title hidden-xs"> <div>Your own tools</div> <div>Own your contents</div> </h1> <div class="carousel-indicators"> <div class="carousel-item active" data-target="#carouselSecondIndicators" data-slide-to="0"> <img src="https://hackmd.io/images/home/index-value-01.svg" class="icon"> <div> <div class="title">Markdown for everything</div> <div class="content">Technical document, UML chart, math formula, data visualization, even slide deck – All portable.</div> </div> </div> <div class="carousel-item" data-target="#carouselSecondIndicators" data-slide-to="1"> <img src="https://hackmd.io/images/home/index-value-02.svg" class="icon"> <div> <div class="title">Document with Git the way you code</div> <div class="content">Manage documentation with the Git workflow, decentralize the editing and storage, centralize the final documents.</div> </div> </div> <div class="carousel-item" data-target="#carouselSecondIndicators" data-slide-to="2"> <img src="https://hackmd.io/images/home/index-value-03.svg" class="icon"> <div> <div class="title">Your tools should work for you</div> <div class="content">Access your notes with hotkey-invoked browser extension. One-click export notes to use HackMD in VSCode.</div> </div> </div> </div> </div> </div> <div class="row hmd-pt-0-xs hmd-pt-3/2-md"> <div class="col-xs-12 hmd-text-left button-container"> <form action="https://hackmd.io/template/template-Try-it?redirect=true" method="POST"> <div class="hmd-dn"><input type="hidden" name="_csrf" value="a9oELv1E-EevPcTTxLX6smDg_CWfMSVzhBkg"></div> <button type="submit" class="ui-new-note ui-new-note-features plausible-event-name=HomeUseFree btn btn-lg btn-primary" style="min-width: 110px;">Use for free</button> </form> </div> </div> </div> <div class="home-container"> <div class="row"> <div class="col-xs-12"> <h2 class="home-heading" style="margin-bottom: 15px;">Features</h2> <div style="margin-bottom: 25px; font-size: 20px;">Boost productivity your way</div> </div> </div> <div class="row hmd-flex hmd-flex-wrap hmd-ph-0-md hmd-mh-0-md"> <div class="col-xs-12"></div> <!-- hack for safari --> <div class="col-xs-12 col-md-4 hmd-ph-3/2 feature-card hmd-mb-3"> <div class="content"> <img src="https://hackmd.io/images/home/feature-01.svg" class="icon"> <p class="title hmd-mb-3/2 hmd-mt-2"><strong>VSCode Extension</strong></p> <div class="subtitle">Write and see all HackMD supported markdown syntax right in VSCode.</div> <div class="feature-button-container"> <a class="learn-more" target="_blank" href="https://marketplace.visualstudio.com/items?itemName=HackMD.vscode-hackmd">Install now<i class='fa fa-angle-right' aria-hidden='true'></i></a> </div> </div> </div> <div class="col-xs-12 col-md-4 hmd-ph-3/2 feature-card hmd-mb-3"> <div class="content"> <img src="https://hackmd.io/images/home/feature-02.svg" class="icon"> <p class="title hmd-mb-3/2 hmd-mt-2"><strong>GitHub Integration</strong></p> <div class="subtitle">Version controlling your documents with your favorite GitHub workflow.</div> <div class="feature-button-container"> <a class="learn-more" target="_blank" href="https://hackmd.io/c/tutorials/%2Fs%2Flink-with-github">Learn more<i class='fa fa-angle-right' aria-hidden='true'></i></a> </div> </div> </div> <div class="col-xs-12 col-md-4 hmd-ph-3/2 feature-card hmd-mb-3"> <div class="content"> <img src="https://hackmd.io/images/home/feature-03.svg" class="icon"> <p class="title hmd-mb-3/2 hmd-mt-2"><strong>Browser Extension</strong></p> <div class="subtitle">Capture your thoughts and stay in the flow with hotkey-invoked browser extension.</div> <div class="feature-button-container"> <a class="learn-more" target="_blank" href="https://hackmd.io/c/tutorials/%2Fs%2Fhackmd-it">Install now<i class='fa fa-angle-right' aria-hidden='true'></i></a> </div> </div> </div> <div class="col-xs-12 col-md-4 hmd-ph-3/2 feature-card hmd-mb-3"> <div class="content"> <img src="https://hackmd.io/images/home/feature-04.svg" class="icon"> <p class="title hmd-mb-3/2 hmd-mt-2"><strong>MathJax and UML </strong></p> <div class="subtitle">Draw UML diagrams in SVG and write scientific formula with plain text in one tool.</div> <div class="feature-button-container"> <a class="learn-more" target="_blank" href="https://hackmd.io/c/tutorials/%2Fs%2FMathJax-and-UML">Learn more<i class='fa fa-angle-right' aria-hidden='true'></i></a> </div> </div> </div> <div class="col-xs-12 col-md-4 hmd-ph-3/2 feature-card hmd-mb-3"> <div class="content"> <img src="https://hackmd.io/images/home/feature-05.svg" class="icon"> <p class="title hmd-mb-3/2 hmd-mt-2"><strong>Slide Mode</strong></p> <div class="subtitle">Turn your note to slide deck and own the stage in a minute.</div> <div class="feature-button-container"> <a class="learn-more" target="_blank" href="https://hackmd.io/c/tutorials/%2Fs%2Fhow-to-create-slide-deck">Learn more<i class='fa fa-angle-right' aria-hidden='true'></i></a> </div> </div> </div> <div class="col-xs-12 col-md-4 hmd-ph-3/2 feature-card hmd-mb-3"> <div class="content"> <img src="https://hackmd.io/images/home/feature-06.svg" class="icon"> <p class="title hmd-mb-3/2 hmd-mt-2"><strong>Book Mode</strong></p> <div class="subtitle">Create a collection of related documents, organize under chapters, and share at once.</div> <div class="feature-button-container"> <a class="learn-more" target="_blank" href="https://hackmd.io/c/tutorials/%2Fs%2Fhow-to-create-book">Learn more<i class='fa fa-angle-right' aria-hidden='true'></i></a> </div> </div> </div> </div> <a class="btn btn-default btn-lg btn-outline" target="_blank" href="https://hackmd.io/c/tutorials/%2Fs%2Ftutorials">More features</a></div> <div class="home-container hmd-pt-0"> <div class="row"> <div class="col-xs-12"> <h2 class="home-heading">Become highly collaborative like these teams</h2> </div> </div> <div class="row trusted-by-customer-block"> <a class="customer-card"><img src="https://hackmd.io/images/home/logo-ethereum.svg" alt="ethereum"></a> <a class="customer-card"><img src="https://hackmd.io/images/home/logo-g-0-v.svg" alt="g0v"></a> <a class="customer-card"><img src="https://hackmd.io/images/home/logo-procore.svg" alt="procore"></a> <a class="customer-card"><img src="https://hackmd.io/images/home/logo-crowd-works.png" alt="crowd-works"></a> </div> <div class="hmd-mt-6"> <div class="customer-testimonial hmd-ph-3/2"> <div class="testimonial-block hmd-text-gray-lightest hmd-mh-auto hmd-mb-2 hmd-ph-0 hmd-ph-7-sm hmd-pt-6 hmd-pt-0-sm hmd-text-left" style="max-width: 790px;"> <img class="quote quote-l" src="https://hackmd.io/images/quote-L.svg"> <img class="quote quote-r hmd-dn hmd-db-sm" src="https://hackmd.io/images/quote-R.svg"> <p class="hmd-mb-3"> We've looked for ways to make our team discussions and process more visible and accessible to all users. We recently switched from Google Docs to HackMD. HackMD offers a great unified Markdown editor/preview which is familiar and well-suited to our needs. Our meeting records have improved a lot over a short period and as a result we are able to be better accountable to each other as a team. </p> <p class="hmd-text-gray-lighter-2 hmd-text-left"> <span class="hmd-text-bold">Bryan Van de Ven</span> <br> <span>Co-creator and Project Lead of Bokeh</span> </p> </div></div> </div> <div style="max-width: 960px;" class="hmd-mh-auto hmd-mt-12 hmd-ph-3/2 blog-posts"> <h2 class="home-heading" style="line-height: 52px;">See how customers use HackMD</h2> <div class="hmd-flex hmd-flex-column hmd-flex-row-sm hmd-justify-center"> <div class="hmd-flex-one hmd-mr-2-sm"> <img class="hmd-mw-100 hmd-w-100" src="https://hackmd.io/images/home/blog/k8s.png"> </div> <div class="hmd-text-left hmd-flex-one hmd-ml-2-sm"> <h3 class="hmd-mt-3 hmd-mt-0-sm blog-title">How I use HackMD in Open Source projects</h3> <p class="hmd-text-gray-lightest hmd-mb-3" style="font-size: 16px;"> One of the major properties of successful open source projects is their ability to be transparent with their communities.<br>This involves everything from open governance, to values, to technical direction. </p> <p class="hmd-text-gray-lighter-2" style="font-size: 16px;"> <span class="hmd-text-bold">Jorge O. Castro</span> <br> <span>Kubernetes</span> </p> <a target="_blank" href="https://hackmd.io/@hackmd/customer-stories/https%3A%2F%2Fhackmd.io%2F%40hackmd%2Fk8s-story"> <button class="btn btn-outline btn-lg btn-gray hmd-mt-3"> Learn more </button> </a> </div> </div> </div> </div> <div class="home-container hmd-bg-white"> <div class="row"> <h2 class="home-heading text-black-brand">There is a HackMD plan for you</h2> <div class="text-7 font-semibold flex justify-center items-center mt-12 text-black-brand"> <span>Billing Cycle: Annual</span> <input type="checkbox" class="hidden" id="cycle-toggle-cb" aria-label="payment-cycle"> <label class="payment-cycle-switch mx-3 bg-white w-8 h-5 border-2 border-black-brand border-solid cursor-pointer" for="cycle-toggle-cb"></label> <span>Monthly</span> </div> <div class="container-fluid hmd-flex hmd-flex-wrap hmd-mt-7"> <div class="col-xs-12 pricing-card-container hmd-br-sm card-container"> <div class="pricing-card hmd-pa-4"> <div class="container-fluid"> <div class="col-sm-12 col-xs-12 hmd-pa-0"> <h3 class="hmd-mt-0 hmd-mb-2">Free</h3> <p>Free basic features for<br>working effectively together</p> <div class="price-info-container hmd-flex hmd-flex-column hmd-justify-start"> <div class="price"> $<span class="number">0</span> USD </div> </div> <a href="https://hackmd.io/join" class="ui-pricing-join plausible-event-name=HomePlanStartUse btn btn-lg btn-primary btn-outline hmd-mt-3 hmd-w-full hmd-mt-3/2-xs hmd-db hmd-mh-auto">Start using</a> <ul class="hmd-pl-0 list-dot hmd-mh-1/4 hmd-mt-4 hmd-mt-3/2-xs"> <li class="hmd-flex">Unlimited notes</li> <li class="hmd-flex">3 invitees</li> <li class="hmd-flex">3 custom templates</li> <li class="hmd-flex">GitHub integration</li> <li class="hmd-flex">Customize permalink to your note</li> </ul> </div> </div></div> </div> <div class="col-xs-12 pricing-card-container"> <div class="popular-block"> <h4>Most popular</h4> <div class="pricing-card hmd-pa-4"> <div class="container-fluid"> <div class="mb-20 col-sm-12 col-xs-12 hmd-pa-0"> <h3 class="hmd-flex hmd-justify-center hmd-items-center hmd-mt-0 hmd-mb-2"> <span class="mr-2 hmd-primer-logo"></span> Prime </h3> <p>Shared team space gets<br>everyone on the same page</p> <div class="price-info-container hmd-flex hmd-flex-column hmd-justify-start"> <div class="price yearly"> $<span class="number">5</span> USD <small class="inline-block top-1 relative text-left"> Per user per month<br>(Pay $60 USD yearly to <span class="text-blue-default">save 37.5%</span>) </small> </div> <div class="price monthly"> $<span class="number">8</span> USD <small>Per user per month</small> </div> </div> <a href="https://hackmd.io/join?create-paid-team=true" class="ui-pricing-create-team-plan plausible-event-name=HomePlanUpgrade btn btn-lg btn-primary hmd-mt-3 hmd-w-full hmd-mt-3/2-xs hmd-db hmd-mh-auto">Upgrade</a> <ul class="hmd-pl-0 list-dot hmd-mh-1/4 hmd-mt-4 hmd-mt-3/2-xs"> <li class="hmd-flex arrow-left">Everything in Free, plus</li> <li class="hmd-flex">Control permissions for each Team member</li> <li class="hmd-flex">Set default note permission</li> <li class="hmd-flex">Unlimited invitees</li> <li class="hmd-flex">Unlimited custom templates</li> <li class="hmd-flex">Dedicated storage for images</li> <li class="hmd-flex">Full-text search</li> </ul> </div> </div> </div> </div> </div> <div class="col-xs-12 pricing-card-container hmd-br-sm card-container"> <div class="pricing-card hmd-pa-4"> <div class="container-fluid"> <div class="col-sm-12 col-xs-12 hmd-pa-0"> <h3 class="hmd-mt-0 hmd-mb-2">Enterprise</h3> <p>Single Sign-On integration and<br>role-based access control for businesses</p> <div class="price-info-container hmd-flex hmd-flex-column hmd-justify-center"> <a href="https://hackmd.io/enterprise" class="ui-pricing-upgrade-sass btn btn-lg btn-primary btn-outline hmd-mt-3 hmd-w-full hmd-mt-3/2-xs hmd-db hmd-mh-auto">See more</a> </div> <a href="#" data-toggle="modal" data-target=".contact-form-modal" class="ui-pricing-contact-us btn btn-lg btn-primary hmd-mt-3 hmd-w-full hmd-db hmd-mt-25-xs hmd-mh-auto"> Request for demo </a> <ul class="hmd-pl-0 list-dot hmd-mh-1/4 hmd-mt-4 hmd-mt-3/2-xs"> <li class="hmd-flex arrow-left">Everything in Prime Team, plus</li> <li class="hmd-flex">Role-based access control</li> <li class="hmd-flex">SSO (SAML/LDAP/customized) login</li> <li class="hmd-flex">Custom domain and homepage</li> <li class="hmd-flex">GitHub and GitLab integration</li> <li class="hmd-flex">Full-text search</li> <li class="hmd-flex">Custom payment methods</li> <li class="hmd-flex">Dedicated account manager</li> </ul> </div> </div></div> </div> </div> <a class="btn btn-primary btn-lg btn-outline" href="https://hackmd.io/pricing">Read more</a> </div> </div> <div class="container home-container hmd-pv-10-md"> <div class="row"> <div class="col-xs-12"> <p class="h3 hmd-mt-0 hmd-mb-3" style="font-size: 30px;"> Join 400,000+ active users! Come and love it ❤️️ </p> <form action="https://hackmd.io/join" class="flex m-auto input-group" method="get" style="max-width: 680px;"> <input type="email" name="email" class="form-control ui-home-email" placeholder="Enter your email"> <div class="input-group-append"> <button type="submit" class="btn btn-success btn-lg ui-home-join plausible-event-name=HomeBtmEmail">Sign-up</button> </div> </form> </div> </div> </div> <!-- contact form modal --><div class="modal fade contact-form-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div style="height: calc(100vh - 60px);"> <iframe src="https://airtable.com/embed/shrC8Ow2JkIIf1wzk?backgroundColor=orange" width="100%" height="100%" frameborder="0" marginheight="0" marginwidth="0" style="padding: 3px;">Loading…</iframe> </div> </div> </div></div> <script nonce="27444481-72bd-4f32-89f0-591507a49a2a"> const pricingCards = document.querySelectorAll('.home-container .price-info-container') document.getElementById('cycle-toggle-cb') && document.getElementById('cycle-toggle-cb').addEventListener('change', (e) => { if (e.target.checked) { pricingCards.forEach(card => card.classList.add('checked')) } else { pricingCards.forEach(card => card.classList.remove('checked')) } })</script> </div></div> <!-- delete modal --><div class="modal fade delete-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog modal-sm"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span> </button> <h4 class="modal-title" id="myModalLabel">Are you sure?</h4> </div> <div class="modal-body" style="color:black;"> <h5 class="ui-delete-modal-msg"></h5> <strong class="ui-delete-modal-item"></strong> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> <button type="button" class="btn btn-danger ui-delete-modal-confirm">Yes, do it!</button> </div> </div> </div></div><!-- template notes modal --><div class="modal fade template-modal" id="templateModal" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true" > <div class="modal-dialog modal-lg" style="width: calc(100vw - 20px); max-width: 1000px;"> <div class="modal-content template-content"> <div class="modal-header"> <button type="button" class="close ui-template-cancel visible-xs hidden-xs" style="margin-top: 2px !important; font-size: 15px !important; display: none;"><span aria-hidden="true">Cancel</span></button> <button type="button" class="close ui-template-close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true"><i class="fa fa-times fa-18"></i></span></button> <h4 class="modal-title ui-template-title" id="mySmallModalLabel"><i class="fa fa-file-image-o"></i> <span>Create a note from template</span></h4> <h4 class="modal-title visible-xs hidden-xs ui-template-title-xs"><i class="fa fa-file-image-o"></i> <span>Create a note from template</span></h4> </div> <div class="modal-body" style="padding: 0px; overflow-x: hidden;"> <div class="row"> <div class="col-sm-8 template-preview-container hidden-xs"> <div> <div class="ui-template-spinner unselectable hidden-print"></div> <iframe class="template-viewer" style="width: 100%; height: 100%; border: none;"></iframe> <div class="template-empty ui-template-viewer-empty" style="display: none; margin: 0px;"> <img src="https://hackmd.io/not-available.svg"> <div> <div>Oops...</div> <div>This template has been removed or transferred.</div> </div> </div> </div> <button type="button" class="visible-xs btn btn-primary ui-use-template-btn-mobile">Use this template</button> </div> <div class="col-sm-4 template-list-container"> <div class="ui-templates-container"> <div class="border-0 border-b border-gray-200 border-solid template-button-container hmd-pa-2"> <button type="button" class="btn btn-success w-full ui-template-sign-in-btn" style="height: 40px; font-size: 16px;" data-toggle="modal" data-target=".signin-modal"> Sign in </button> <p style="margin-top: 15px; display: none;" class="template-quota-alert"> <span class="template-quota-description" style="color: #777777;"></span> <br> <a target="_blank" href="/?nav=billing" class="template-quota-upgrade-now"> Upgrade <i class="fa fa-fw fa-angle-right" aria-hidden="true"></i> </a> </p> </div> <div class="dropdown ui-template-list-filter" style="margin: 20px;"> <a class="ui-template-list-filter-label" id="template-list-filter" data-filter-type="all" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span>All</span><i class="fa fa-angle-down" aria-hidden="true" style="margin-left: 10px;"></i></a> <ul class="dropdown-menu" role="menu" aria-labelledby="template-list-filter" style="right: 0px; left: auto;"> <li role="presentation"><a role="menuitem" class="ui-template-filter-all" tabindex="-1" href="#">All</a></li> <li role="presentation"><a role="menuitem" class="ui-template-filter-team" tabindex="-1" href="#">Team</a></li> </ul> </div> <div class="template-empty ui-template-list-empty"> <i class="fa fa-file-image-o" aria-hidden="true"></i> <div>No template.</div> </div> <div class="list-group ui-template-list" style="flex:1;"> </div> <button type="button" class="btn btn-primary ui-use-template-btn hidden-xs">Use this template</button> </div> </div> </div> </div> </div> </div></div> <!-- create template modal --><div class="modal fade create-template-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" > <div class="modal-dialog modal-lg" style="width: calc(100vw - 20px); max-width: 860px;"> <form> <div class="modal-content template-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="margin-top: 2px; height: 17px;"><span aria-hidden="true"><i class="fa fa-times fa-18"></i></span> </button> <h4 class="modal-title" id="myModalLabel">Create a template</h4> </div> <div class="modal-body hmd-text-center" style="color:black; padding: 20px; padding-bottom: 10px; text-align: left;"> <div class="mb-5 template-quota-excceed-block"> <span class="template-quota-description" style="color: #777777;"></span> <br> <a target="_blank" href="/?nav=billing" class="template-quota-upgrade-now"> Upgrade <i class="fa fa-fw fa-angle-right" aria-hidden="true"></i> </a> </div> <div class="grid items-center grid-cols-12 form-group mb-7" > <label class="col-span-4 font-normal text-black-brand" for="templateName">Template name</label> <input type="text" id="templateName" class="col-span-8 form-control" placeholder="Template name" aria-label="TemplateName" aria-describedby="template-name" maxlength="250" required> </div> <div class="grid items-start grid-cols-12 form-group creation-method-option"> <label class="col-span-4 font-normal text-black-brand" for="templateName">Save as option</label> <div class="col-span-8"> <label class="w-full font-normal ui-save-template-directly" for="save-template-directly"> <input type="radio" name="save-template" value="save-directly" checked id="save-template-directly"> <span class="ml-2">Save this note as a template</span> </label> <label class="w-full font-normal ui-save-template-as-another-template" for="save-template-as-another-template"> <input type="radio" name="save-template" value="save-as-another-template" id="save-template-as-another-template"> <span class="ml-2">Save to another note as a template</span> </label> </div> </div> </div> <div class="modal-footer" style="border: none; padding: 20px;"> <button type="button" class="btn btn-default" data-dismiss="modal" style="flex:1;">Cancel</button> <button type="submit" class="btn btn-primary ui-create-template-modal-confirm" style="flex:1;">Save</button> </div> </div> </form> </div></div> <!-- delete template modal --><div class="modal fade delete-template-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog modal-sm"> <div class="modal-content template-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="margin-top: 2px; height: 17px;"><span aria-hidden="true"><i class="fa fa-times fa-18"></i></span> </button> <h4 class="modal-title" id="myModalLabel">Delete template</h4> </div> <div class="modal-body hmd-text-center" style="color:black; padding: 14.5px 15px; padding-bottom: 0px; text-align: left;"> <p class="ui-delete-modal-msg" style="font-size: 15px;">Do you really want to delete this template?</p> <div class="form-check" style="display: flex;"> <input type="checkbox" class="form-check-input ui-delete-note-check" style="margin-top: 7px;" id="deleteNoteCheck"> <label class="form-check-label" style="margin-top: 3px; margin-left: 5px; font-weight: 400;" for="deleteNoteCheck"> Keep the content <div style="font-size: 13px; margin-top: 5px; color: #818181; line-height: 18px;">Turn this template into a regular note and keep its content, versions, and comments.</div> </label> </div> </div> <div class="modal-footer" style="border: none; padding: 20px 15px; display: flex;"> <button type="button" class="btn btn-default" data-dismiss="modal" style="flex:1;">Cancel</button> <button type="button" class="btn btn-danger ui-delete-template-modal-confirm" style="flex:1;">Delete</button> </div> </div> </div></div> <!-- signin modal --> <div class="modal fade signin-modal" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="margin-top: 10px; right: 20px; position: absolute;"><span aria-hidden="true">×</span></button> <h3>Sign in</h3> <form data-toggle="validator" role="form" class="form-horizontal" method="post" enctype="application/x-www-form-urlencoded" id="signin-form"> <div class="hmd-dn"><input type="hidden" name="_csrf" value="a9oELv1E-EevPcTTxLX6smDg_CWfMSVzhBkg"></div> <div class="hmd-dn"><input type="hidden" name="create_team" value="false"></div> <div class="hmd-dn"><input type="hidden" name="create_paid_team" value="false"></div> <div class="form-group "> <label for="email" class="control-label">Email</label> <label for="inputEmail" class="control-label pull-right errors"> </label> <span class="help-block control-label with-errors pull-right" style="display: inline;"></span> <div class="input-block"> <input type="email" class="form-control" name="email" placeholder="Your email" required autocomplete="email"> <span class="error-sign"></span> </div> </div> <div class="form-group "> <label for="password" class="control-label">Password</label> <label for="inputPassword" class="control-label pull-right errors"> </label> <span class="help-block control-label with-errors pull-right" style="display: inline;"></span> <div class="input-block"> <input type="password" class="form-control" name="password" placeholder="Your password" required autocomplete="current-password" maxlength="128"> <span class="error-sign"></span> <span class="control-label pull-right" style="font-size: 13px; margin-top: 5px;"><a href="https://hackmd.io/settings/forgotPassword" style="text-decoration: underline;">Forgot password</a></span> </div> </div> <div style="text-align: center; padding-top: 15px; margin-bottom: 0px;"> <div hidden id="hmd-captcha" data-provider="recaptcha" data-captcha-data="6LdtkK4ZAAAAAG1B4iENhmQTce1xNTyHu0GjgnXi:6LenMnsmAAAAAF-t82ME2ca_ISjs1UH0s6cmlD8I" class="flex justify-center" ></div> <input type="submit" class="btn btn-success btn-large" formaction="https://hackmd.io/login" value="Sign in"> </div></form> <p class="separator">or</p> <p>By clicking below, you agree to our <a href="https://hackmd.io/s/terms" target="_blank">terms of service</a>.</p> <script id="gsi-client" src="https://accounts.google.com/gsi/client" async defer nonce="27444481-72bd-4f32-89f0-591507a49a2a"></script><script nonce="27444481-72bd-4f32-89f0-591507a49a2a"> function handleCredentialResponse(response) { const form = document.getElementById('sign-in-with-google-form') form.children.credential.value = response.credential form.children.method.value = location.href.toLowerCase() === 'https://hackmd.io/settings#general' ? 'merge' : 'login' form.submit() } var GSI_READY = new Promise(function (resolve) { function initialize () { google.accounts.id.initialize({ client_id: '911617723593-drikdibvvn63slfd6kbqigo8ql1no55s.apps.googleusercontent.com', callback: handleCredentialResponse }) const loginPath = 'https://hackmd.io/login' const joinPath = 'https://hackmd.io/join' const renderButton = function () { google.accounts.id.renderButton( document.getElementById('sign-in-with-google-button'), { type: 'standard', width: 250 } ) } if (location.href.toLowerCase() === loginPath || location.href.toLowerCase() === joinPath) { renderButton() } else { $('.signin-modal').one('shown.bs.modal', function () { renderButton() }) } resolve() } window.addEventListener('load', function () { initialize() }) })</script><form class="hidden" id="sign-in-with-google-form" action="/auth/google" method="post"> <input type="hidden" name="credential"> <input type="hidden" name="method"></form> <div class="social-buttons-container"> <div id="sign-in-with-google-button"></div> <a href="https://hackmd.io/auth/facebook" class="btn btn-lg btn-block btn-social btn-facebook"> <i class="fa fa-facebook"></i> Sign in via Facebook </a> <a href="https://hackmd.io/auth/twitter" class="btn btn-lg btn-block btn-social btn-twitter"> <i class="fa fa-twitter"></i> Sign in via Twitter </a> <a href="https://hackmd.io/auth/github" class="btn btn-lg btn-block btn-social btn-github"> <i class="fa fa-github"></i> Sign in via GitHub </a> <a href="https://hackmd.io/auth/dropbox" class="btn btn-lg btn-block btn-social btn-dropbox"> <i class="fa fa-dropbox"></i> Sign in via Dropbox </a> <a href="#" class="bg-white btn btn-block btn-social btn-web3 bg-gray-800 hocus:bg-[#2b2b2b] text-white hocus:text-white"> <img src="https://hackmd.io/images/wallet.svg" style="max-height: 20px; margin-top: 8px; margin-left: 6px; border: none;"> <span class="sign-in-wallet-text"> Sign in with Wallet </span> <div class="inline-flex items-center justify-between w-full hidden web3-wallet-info"> <span> Wallet ( <span class="web3-wallet-address"></span> ) </span> <i class="fa fa-arrow-right" aria-hidden="true"></i> </div> </a> <small class="web3-wallet-info hidden text-left hocus:text-white underline hocus:underline block pt-2 ui-disconnect-connected-wallets text-gray-600 cursor-pointer"> Connect another wallet </small> </div> <div > <p>New to HackMD? <a href="https://hackmd.io/join" class="plausible-event-name=LoginModalSignUp">Sign up</a></p> </div> </div> </div></div> <!-- feedback modal --><div class="modal fade feedback-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class='modal-dialog modal-lg' role='document'> <div class='modal-content'> <div class='modal-header' style="padding: 8px 15px; font-weight: 700"> <button type='button' class='close' aria-label='Close' style="font-size: 26px; margin-top: -1px;" data-dismiss="modal"> <span aria-hidden='true'>×</span> </button> <h4 class='modal-title'>Feedback</h4> </div> <div class='modal-body' style="text-align: left;"> <div class='alert alert-danger' style="display: none;"> <i class='fa fa-exclamation-triangle' aria-hidden='true' style="margin-right: 5px"></i> Submission failed, please try again </div> <h3 style="margin-top:5px">Thanks for your support.</h3> <p>On a scale of 0-10, how likely is it that you would recommend HackMD to your friends, family or business associates?</p> <div class="rating-group" style="margin-top: 15px; margin-bottom: 30px;"></div> <p style="font-size:16px">Please give us some advice and help us improve HackMD.</p> <form role='form' data-toggle='validator'> <div class='form-group' style="margin-bottom: 10px;"> <textarea name='feedback' class='form-control' placeholder="Enter your feedback" rows="3" style="resize: none;" required></textarea> </div> <div class='checkbox' style="font-size:16px"> <label> <input name='engage' type='checkbox' checked /> I’m willing to participate in user experience research or beta testing so HackMD could build things I want. </label> </div> <div class='form-group hmd-flex hmd-items-center' style="font-size: 16px; padding-left: 20px;"> <label style="font-weight: normal;">My Email:</label> <div class='hmd-flex-auto hmd-pr-0'> <input type='email' name='email' class='form-control col-sm-9' aria-describedby='helpId' placeholder="Email address" required /> </div> </div> <div class='modal-footer' style="padding: 15px 0; border: none;"> <button type='button' class='btn btn-default' data-dismiss="modal">Cancel</button> <button type='submit' class='btn btn-primary ui-feedback-submit'>Submit</button> </div> </form> </div> </div> </div></div> <!-- feedback success modal --><div class="modal fade feedback-success-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class='modal-dialog modal-sm' role='document'> <div class='modal-content'> <div class='modal-body' style="padding: 50px 20px; text-align: center;"> <img src="/images/feedback.svg" width="85" height="95" /> <h4>Thanks for your feedback</h4> </div> </div> </div></div> <!-- message modal --><div class="modal fade message-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog modal-sm"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span> </button> <h4 class="modal-title" id="myModalLabel"></h4> </div> <div class="modal-body" style="color:black;"> <img> <h5 style="font-weight: 600; font-size: 18px;"></h5> <p></p> <a target="_blank" style="word-break: break-all;" rel="noopener"></a> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">OK</button> </div> </div> </div></div> <!-- create team modal --><div class="modal fade create-team-modal" id="createTeamModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header" style="background-color: #f8f8f8; border-top-left-radius: 5px; border-top-right-radius: 4px;"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span> </button> <h4 class="modal-title" id="myModalLabel"> Create team </h4> </div> <div class="modal-body"> <div class="alert alert-danger hmd-text-left" style="display: none;"> <i class="fa fa-fw fa-exclamation-triangle" aria-hidden="true"></i> <span class="team-create-error"></span> </div> <form data-toggle="validator"> <div class="form-group hmd-flex hmd-items-center"> <label class="hmd-flex-one hmd-text-left" for="team-name">Team Name</label> <input type="text" class="form-control hmd-flex-two" name="name" id="team-name" placeholder="settings.team-name-placeholder" data-minlength="1" maxlength="80" required> </div> <div class="form-group hmd-flex hmd-items-center"> <label class="hmd-flex-one hmd-text-left" for="team-description">Team Description</label> <input type="text" class="form-control hmd-flex-two" name="description" id="team-description" placeholder="Your team description" maxlength="100"> </div> <div class="form-group hmd-flex hmd-items-center"> <label class="hmd-flex-one hmd-text-left" for="team-path">Team URL Path</label> <div class="hmd-flex hmd-flex-column hmd-flex-two"> <div class="hmd-flex hmd-items-center"> <span class="hmd-mr-1">https://hackmd.io/team/</span> <input type="text" class="form-control" name="path" id="team-path" placeholder="Your team URL path" pattern="^(?!-)[a-zA-Z0-9\-]+$" data-minlength="1" maxlength="39" required> </div> <small style="text-align: right; color: #888888;">Allow a-Z, 0-9 and dash not at beginning.</small> </div> </div> <div class="modal-footer hmd-pa-0" style="border: none;"> <button type="button" data-dismiss="modal" class="btn btn-default" >Cancel</button> <button type="submit" class="btn btn-primary">Create team</button> </div> </form> </div> </div> </div></div> <footer class="hmd-bg-gray-darkest hmd-text-left hmd-pv-4"> <div class="container-thin"> <div class="row"> <div class="col-xs-12"> <div class="row hmd-mb-1"> <div class="col-xs-12 col-sm-6 col-md-3 hmd-ph-2 hmd-mb-3 hmd-mb-0-md"> <h4 class="hmd-mt-0 hmd-pb-1/4">Tutorial</h4> <ul class="list-unstyled"> <li class="hmd-pv-1/4"> <a href="https://hackmd.io/c/tutorials/%2Fs%2Ffeatures" class="hmd-text-gray-lighter"> Features </a> </li> <li class="hmd-pv-1/4"> <a href="https://hackmd.io/c/tutorials" class="hmd-text-gray-lighter"> Tutorials book </a> </li> </ul> </div> <div class="col-xs-12 col-sm-6 col-md-3 hmd-ph-2 hmd-mb-3 hmd-mb-0-md"> <h4 class="hmd-mt-0 hmd-pb-1/4">Resources</h4> <ul class="list-unstyled"> <li class="hmd-pv-1/4"> <a href="https://hackmd.io/pricing" class="hmd-text-gray-lighter"> Pricing </a> </li> <li class="hmd-pv-1/4"> <a href="https://hackmd.io/s/release-notes" class="hmd-text-gray-lighter"> Releases </a> </li> <li class="hmd-pv-1/4"> <a href="https://blog.hackmd.io" class="hmd-text-gray-lighter" target="_blank" rel="noreferrer noopener"> Blog </a> </li> </ul> </div> <div class="col-xs-12 col-sm-6 col-md-3 hmd-ph-2 hmd-mb-3 hmd-mb-0-md"> <h4 class="hmd-mt-0 hmd-pb-1/4">Policy</h4> <ul class="list-unstyled"> <li class="hmd-pv-1/4"> <a href="https://hackmd.io/s/terms" target="_blank" class="hmd-text-gray-lighter"> Terms </a> </li> <li class="hmd-pv-1/4"> <a href="https://hackmd.io/s/privacy" target="_blank" class="hmd-text-gray-lighter"> Privacy </a> </li> </ul> </div> <div class="col-xs-12 col-sm-6 col-md-3 hmd-ph-2 hmd-mb-3 hmd-mb-0-md"> <h4 class="hmd-mt-0 hmd-pb-1/4">Contact us</h4> <ul class="list-unstyled"> <li class="hmd-pv-1/4 inline-flex items-center"> <i class="fa fa-fw fa-envelope hmd-text-gray-lighter"></i> <button class="ui-view-email-address hmd-text-gray-lighter" data-email="c3VwcG9ydEBoYWNrbWQuaW8=" > View email address </button> </li> <li class="hmd-pv-1/4"> <a href="https://facebook.com/hackmdio" class="hmd-text-gray-lighter" target="_blank"> <i class="fa fa-fw fa-facebook-square"></i> HackMD </a> </li> <li class="hmd-pv-1/4"> <a href="https://twitter.com/hackmdio" class="hmd-text-gray-lighter" target="_blank"> <i class="fa fa-fw fa-twitter"></i> @hackmdio </a> </li> <li class="hmd-pv-1/4"> <a href="https://discord.gg/yDw3AJbmwx" class="hmd-text-gray-lighter" target="_blank"> <svg style="margin-bottom: -2px" xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 640 512"><path fill='currentColor' d="M524.531,69.836a1.5,1.5,0,0,0-.764-.7A485.065,485.065,0,0,0,404.081,32.03a1.816,1.816,0,0,0-1.923.91,337.461,337.461,0,0,0-14.9,30.6,447.848,447.848,0,0,0-134.426,0,309.541,309.541,0,0,0-15.135-30.6,1.89,1.89,0,0,0-1.924-.91A483.689,483.689,0,0,0,116.085,69.137a1.712,1.712,0,0,0-.788.676C39.068,183.651,18.186,294.69,28.43,404.354a2.016,2.016,0,0,0,.765,1.375A487.666,487.666,0,0,0,176.02,479.918a1.9,1.9,0,0,0,2.063-.676A348.2,348.2,0,0,0,208.12,430.4a1.86,1.86,0,0,0-1.019-2.588,321.173,321.173,0,0,1-45.868-21.853,1.885,1.885,0,0,1-.185-3.126c3.082-2.309,6.166-4.711,9.109-7.137a1.819,1.819,0,0,1,1.9-.256c96.229,43.917,200.41,43.917,295.5,0a1.812,1.812,0,0,1,1.924.233c2.944,2.426,6.027,4.851,9.132,7.16a1.884,1.884,0,0,1-.162,3.126,301.407,301.407,0,0,1-45.89,21.83,1.875,1.875,0,0,0-1,2.611,391.055,391.055,0,0,0,30.014,48.815,1.864,1.864,0,0,0,2.063.7A486.048,486.048,0,0,0,610.7,405.729a1.882,1.882,0,0,0,.765-1.352C623.729,277.594,590.933,167.465,524.531,69.836ZM222.491,337.58c-28.972,0-52.844-26.587-52.844-59.239S193.056,219.1,222.491,219.1c29.665,0,53.306,26.82,52.843,59.239C275.334,310.993,251.924,337.58,222.491,337.58Zm195.38,0c-28.971,0-52.843-26.587-52.843-59.239S388.437,219.1,417.871,219.1c29.667,0,53.307,26.82,52.844,59.239C470.715,310.993,447.538,337.58,417.871,337.58Z"/></svg> Join Discord </a> </li> </ul> </div> </div> </div> </div> <!-- /.row --> <hr class="hmd-w-100" style="border-color: #6D6D6D;"> <div class="row"> <div class="col-xs-12 col-sm-6 hmd-flex hmd-items-center"> <span class="ui-brand hmd-pr-1"> © 2024 HackMD. All Rights Reserved. </span> </div> <div class="col-xs-12 col-sm-6 hmd-flex hmd-justify-start-xs hmd-justify-end-sm hmd-flex-row-sm hmd-flex-column-xs hmd-items-start-xs hmd-items-center-sm"> <select title="Language" class="ui-locale"> <option value="en">English</option> <option value="zh">中文</option> <option value="fr">Français</option> <option value="de">Deutsch</option> <option value="ja">日本語</option> <option value="es">Español</option> <option value="ca">Català</option> <option value="el">Ελληνικά</option> <option value="pt">Português</option> <option value="it">italiano</option> <option value="tr">Türkçe</option> <option value="ru">Русский</option> <option value="nl">Nederlands</option> <option value="hr">hrvatski jezik</option> <option value="pl">język polski</option> <option value="uk">Українська</option> <option value="hi">हिन्दी</option> <option value="sv">svenska</option> <option value="eo">Esperanto</option> <option value="da">dansk</option> </select> </div> </div> <!-- /.row --> </div> <!-- /.container-thin --> <script nonce="27444481-72bd-4f32-89f0-591507a49a2a"> ;(function () { document.querySelectorAll('.ui-view-email-address').forEach((el) => { el.addEventListener('click', (e) => { e.preventDefault() el.textContent = '' const spinnerEl = document.createElement('span') spinnerEl.classList.add('spinner') spinnerEl.style.backgroundImage = `url(${window.ASSET_URL}/spinner.svg)` el.appendChild(spinnerEl) setTimeout(() => { const email = atob(el.getAttribute('data-email')) const link = document.createElement('a') link.className = el.className link.textContent = email link.href = `mailto:${email}` el.insertAdjacentElement('afterend', link) el.remove() }, 2000) }) }) })()</script> </footer> <script nonce="27444481-72bd-4f32-89f0-591507a49a2a">var announcement = document.getElementsByClassName('announcement');if (announcement.length > 0 && (announcement = announcement[0])) { var name = announcement.getAttribute('name'); var readName = (document.cookie.match('(^|; )announcement=([^;]*)')||0)[2]; if (name !== readName) { announcement.style.display = 'block'; var paddingTop = announcement.offsetHeight > 40 ? announcement.offsetHeight : 40; var container = document.getElementsByClassName('site-wrapper'); if (container.length > 0 && (container = container[0])) { container.style.paddingTop = paddingTop + 'px'; } }}</script> <script src="https://www.googletagmanager.com/gtag/js?id=UA-60728495-1"></script> <script nonce="27444481-72bd-4f32-89f0-591507a49a2a"> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); let userid = (document.cookie.match('(^|; )userid=([^;]*)')||0)[2]; gtag('config', 'UA-60728495-1', {'user_id': userid}); </script> <script src="https://browser.sentry-cdn.com/5.15.5/bundle.min.js" crossorigin="anonymous"></script><script nonce="27444481-72bd-4f32-89f0-591507a49a2a">Sentry.init({ dsn: 'https://73410f1915d84abc8b2dd1f1aabd1c82@sentry.hackmd.dev/4', environment: 'production', integrations: function (intrus) { return intrus.filter(function (itr) { return itr.name !== 'TryCatch' }) } });</script> <!-- Google Tag Manager (noscript) --><noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-KLW9Z3"height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript><!-- End Google Tag Manager (noscript) --> <script src="https://hackmd.io/api/i18n.js"></script> <script src="https://assets.hackmd.io/build/font-vendor.20350cc4e37635143259.js" defer="defer"></script><script src="https://assets.hackmd.io/build/common-vendor.f59a8489b8ce2d49b975.js" defer="defer"></script><script src="https://assets.hackmd.io/build/cover-vendor.af717da25948e2213a85.js" defer="defer"></script><script src="https://assets.hackmd.io/build/cover-common.ca85b8e85b99563864b2.js" defer="defer"></script><script src="https://assets.hackmd.io/build/cover.82485898512a427ed3b3.js" defer="defer"></script> <script type="application/ld+json">{ "@context": "https://schema.org", "@type": "Organization", "url": "https://hackmd.io", "name": "HackMD", "description": "Best way to write and share your knowledge in markdown.", "publishingPrinciples": "https://hackmd.io/s/terms", "logo": { "@type": "ImageObject", "url": "https://hackmd.io/hackmd-icon-1024.png" }, "sameAs": [ "https://www.facebook.com/hackmdio", "https://twitter.com/hackmdio", "https://www.linkedin.com/company/hackmd/", "https://www.producthunt.com/posts/hackmd-4", "https://www.g2.com/products/hackmd" ]}</script> </body> </html> 
