<link crossorigin="anonymous" media="all" integrity="sha512-+EeonPFJPOixSBlN5rTxrzh6vdTLNhknT6HivFp5j4d25wXRkAV0J5LtGSOnUvDdYd5M4r+WcOfulwVw0yLa+Q==" rel="stylesheet" href="https://github.githubassets.com/assets/github-69306aac5d15cf59cad51421acb1bc7d.css" />

<title>strapdownify/readme.md at master · edocevol/strapdownify</title>

<meta name="twitter:image:src" content="https://avatars1.githubusercontent.com/u/9777120?s=400&amp;v=4" /><meta name="twitter:site" content="@github" /><meta name="twitter:card" content="summary" /><meta name="twitter:title" content="edocevol/strapdownify" /><meta name="twitter:description" content="strapdownify是我个人修改后的strapdown框架，用来渲染markdown。作者原始代码库github：`https://github.com/arturadib/strapdown `    - edocevol/strapdownify" />
<meta property="og:image" content="https://avatars1.githubusercontent.com/u/9777120?s=400&amp;v=4" /><meta property="og:site_name" content="GitHub" /><meta property="og:type" content="object" /><meta property="og:title" content="edocevol/strapdownify" /><meta property="og:url" content="https://github.com/edocevol/strapdownify" /><meta property="og:description" content="strapdownify是我个人修改后的strapdown框架，用来渲染markdown。作者原始代码库github：`https://github.com/arturadib/strapdown `    - edocevol/strapdownify" />

  <meta name="google-site-verification" content="KT5gs8h0wvaagLKAVWq8bbeNwnZZK1r1XQysX3xurLU">
<meta name="google-site-verification" content="ZzhVyEFwb7w3e0-uOTltm8Jsck2F5StVihD0exw2fsA">
<meta name="google-site-verification" content="GXs5KoUUkNCoaAZn7wPN-t01Pywp9M3sEjnt_3_ZWPc">

<meta name="google-analytics" content="UA-3769691-2">

  <meta name="hostname" content="github.com">
<meta name="user-login" content="xun1224">

  <meta name="expected-hostname" content="github.com">
<meta name="js-proxy-site-detection-payload" content="OWZmMzk5ZWY5ZGRhNTVmOWM0NTFmOGY4N2FjYzNkZTIzYTBmNTg0NDZkM2IxOTMyODZmZWNlZjFjNzBmYmIzNHx7InJlbW90ZV9hZGRyZXNzIjoiMTEyLjMyLjcwLjEyNyIsInJlcXVlc3RfaWQiOiI4MEI5OjNCRDU6QTNGNEZCOkU5NDY3QTo1RDg0RTgyNyIsInRpbWVzdGFtcCI6MTU2ODk5MTI3NSwiaG9zdCI6ImdpdGh1Yi5jb20ifQ==">

<meta name="enabled-features" content="ACTIONS_V2_ON_MARKETPLACE,MARKETPLACE_FEATURED_BLOG_POSTS,MARKETPLACE_INVOICED_BILLING,MARKETPLACE_SOCIAL_PROOF_CUSTOMERS,MARKETPLACE_TRENDING_SOCIAL_PROOF,MARKETPLACE_RECOMMENDATIONS,MARKETPLACE_PENDING_INSTALLATIONS,NOTIFY_ON_BLOCK,RELATED_ISSUES,GHE_CLOUD_TRIAL">

  <link href="https://github.com/edocevol/strapdownify/commits/master.atom" rel="alternate" title="Recent Commits to strapdownify:master" type="application/atom+xml">

<link rel="canonical" href="https://github.com/edocevol/strapdownify/blob/master/demo/readme.md" data-pjax-transient>

Skip to content

      <header class="Header js-details-container Details flex-wrap flex-lg-nowrap p-responsive" role="banner">

<div class="Header-item d-none d-lg-flex">
  <a class="Header-link" href="https://github.com/" data-hotkey="g d" aria-label="Homepage" data-ga-click="Header, go to dashboard, icon:logo">

</div>

<div class="Header-item d-lg-none">
  <button class="Header-link btn-link js-details-target" type="button" aria-label="Toggle navigation" aria-expanded="false">
    <svg height="24" class="octicon octicon-three-bars" viewBox="0 0 12 16" version="1.1" width="18" aria-hidden="true"><path fill-rule="evenodd" d="M11.41 9H.59C0 9 0 8.59 0 8c0-.59 0-1 .59-1H11.4c.59 0 .59.41.59 1 0 .59 0 1-.59 1h.01zm0-4H.59C0 5 0 4.59 0 4c0-.59 0-1 .59-1H11.4c.59 0 .59.41.59 1 0 .59 0 1-.59 1h.01zM.59 11H11.4c.59 0 .59.41.59 1 0 .59 0 1-.59 1H.59C0 13 0 12.59 0 12c0-.59 0-1 .59-1z"/></svg>
  </button>
</div>

<div class="Header-item Header-item--full flex-column flex-lg-row width-full flex-order-2 flex-lg-order-none mr-0 mr-lg-3 mt-3 mt-lg-0 Details-content--hidden">
    <div class="header-search flex-self-stretch flex-lg-self-auto mr-0 mr-lg-3 mb-3 mb-lg-0 scoped-search site-scoped-search js-site-search position-relative js-jump-to"

role="combobox" aria-owns="jump-to-results" aria-label="Search or jump to" aria-haspopup="listbox" aria-expanded="false"

        <div class="Box position-absolute overflow-hidden d-none jump-to-suggestions js-jump-to-suggestions-container">

<img class="avatar mr-2 flex-shrink-0 js-jump-to-suggestion-avatar d-none" alt="" aria-label="Team" src="" width="28" height="28">

<div class="jump-to-suggestion-name js-jump-to-suggestion-name flex-auto overflow-hidden text-left no-wrap css-truncate css-truncate-target">
</div>

<div class="border rounded-1 flex-shrink-0 bg-gray px-1 text-gray-light ml-1 f6 d-none js-jump-to-badge-search">
  <span class="js-jump-to-badge-search-text-default d-none" aria-label="in this repository">
    In this repository
  </span>
  <span class="js-jump-to-badge-search-text-global d-none" aria-label="in all of GitHub">
    All GitHub
  </span>
  <span aria-hidden="true" class="d-inline-block ml-1 v-align-middle">↵</span>
</div>

<div aria-hidden="true" class="border rounded-1 flex-shrink-0 bg-gray px-1 text-gray-light ml-1 f6 d-none d-on-nav-focus js-jump-to-badge-jump">
  Jump to
  <span class="d-inline-block ml-1 v-align-middle">↵</span>
</div>

No suggested jump to results

<img class="avatar mr-2 flex-shrink-0 js-jump-to-suggestion-avatar d-none" alt="" aria-label="Team" src="" width="28" height="28">

<div class="jump-to-suggestion-name js-jump-to-suggestion-name flex-auto overflow-hidden text-left no-wrap css-truncate css-truncate-target">
</div>

<div class="border rounded-1 flex-shrink-0 bg-gray px-1 text-gray-light ml-1 f6 d-none js-jump-to-badge-search">
  <span class="js-jump-to-badge-search-text-default d-none" aria-label="in this repository">
    In this repository
  </span>
  <span class="js-jump-to-badge-search-text-global d-none" aria-label="in all of GitHub">
    All GitHub
  </span>
  <span aria-hidden="true" class="d-inline-block ml-1 v-align-middle">↵</span>
</div>

<div aria-hidden="true" class="border rounded-1 flex-shrink-0 bg-gray px-1 text-gray-light ml-1 f6 d-none d-on-nav-focus js-jump-to-badge-jump">
  Jump to
  <span class="d-inline-block ml-1 v-align-middle">↵</span>
</div>

<img class="avatar mr-2 flex-shrink-0 js-jump-to-suggestion-avatar d-none" alt="" aria-label="Team" src="" width="28" height="28">

<div class="jump-to-suggestion-name js-jump-to-suggestion-name flex-auto overflow-hidden text-left no-wrap css-truncate css-truncate-target">
</div>

<div class="border rounded-1 flex-shrink-0 bg-gray px-1 text-gray-light ml-1 f6 d-none js-jump-to-badge-search">
  <span class="js-jump-to-badge-search-text-default d-none" aria-label="in this repository">
    In this repository
  </span>
  <span class="js-jump-to-badge-search-text-global d-none" aria-label="in all of GitHub">
    All GitHub
  </span>
  <span aria-hidden="true" class="d-inline-block ml-1 v-align-middle">↵</span>
</div>

<div aria-hidden="true" class="border rounded-1 flex-shrink-0 bg-gray px-1 text-gray-light ml-1 f6 d-none d-on-nav-focus js-jump-to-badge-jump">
  Jump to
  <span class="d-inline-block ml-1 v-align-middle">↵</span>
</div>

<li class="d-flex flex-justify-center flex-items-center p-0 f5 js-jump-to-suggestion">
  <img src="https://github.githubassets.com/images/spinners/octocat-spinner-128.gif" alt="Octocat Spinner Icon" class="m-2" width="28">
</li>

        </div>
  </label>

  <nav class="d-flex flex-column flex-lg-row flex-self-stretch flex-lg-self-auto" aria-label="Global">
<a class="Header-link d-block d-lg-none py-2 py-lg-0 border-top border-lg-top-0 border-white-fade-15" data-ga-click="Header, click, Nav menu - item:dashboard:user" aria-label="Dashboard" href="/dashboard">
  Dashboard

Pull requests Issues

Marketplace

</div>

Explore

<a class="Header-link d-block d-lg-none mr-0 mr-lg-3 py-2 py-lg-0 border-top border-lg-top-0 border-white-fade-15" href="https://github.com/xun1224">
  <img class="avatar" height="20" width="20" alt="@xun1224" src="https://avatars0.githubusercontent.com/u/30586336?s=60&amp;v=4" />
  xun1224

Sign out

</div>

<div class="Header-item Header-item--full flex-justify-center d-lg-none position-relative">
  <div class="css-truncate css-truncate-target width-fit position-absolute left-0 right-0 text-center">
          <svg class="octicon octicon-repo" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M4 9H3V8h1v1zm0-3H3v1h1V6zm0-2H3v1h1V4zm0-2H3v1h1V2zm8-1v12c0 .55-.45 1-1 1H6v2l-1.5-1.5L3 16v-2H1c-.55 0-1-.45-1-1V1c0-.55.45-1 1-1h10c.55 0 1 .45 1 1zm-1 10H1v2h2v-1h3v1h5v-2zm0-10H2v9h9V1z"/></svg>
<a class="Header-link" href="/edocevol">edocevol</a>
/
<a class="Header-link" href="/edocevol/strapdownify">strapdownify</a>

<div class="Header-item mr-0 mr-lg-3 flex-order-1 flex-lg-order-none">
  

<a aria-label="You have no unread notifications" class="Header-link notification-indicator position-relative tooltipped tooltipped-s js-socket-channel js-notification-indicator" data-hotkey="g n" data-ga-click="Header, go to notifications, icon:read" data-channel="notification-changed:30586336" href="/notifications">
    <span class="mail-status "></span>
    <svg class="octicon octicon-bell" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M14 12v1H0v-1l.73-.58c.77-.77.81-2.55 1.19-4.42C2.69 3.23 6 2 6 2c0-.55.45-1 1-1s1 .45 1 1c0 0 3.39 1.23 4.16 5 .38 1.88.42 3.66 1.19 4.42l.66.58H14zm-7 4c1.11 0 2-.89 2-2H5c0 1.11.89 2 2 2z"/></svg>

<div class="Header-item position-relative d-none d-lg-flex">
  <details class="details-overlay details-reset">

New repository Import repository New gist New organization

This repository

New issue

</div>

<div class="Header-item position-relative mr-0 d-none d-lg-flex">

Signed in as xun1224

  <div class="pl-3 pr-3 f6 user-status-container js-user-status-context pb-1" data-url="/users/status?compact=1&amp;link_mentions=0&amp;truncate=1">

Clear status

Never

<ul class="dropdown-menu dropdown-menu-se pl-0 overflow-auto" style="width: 220px; max-height: 15.5em">
  <li>
    <button type="button" class="btn-link dropdown-item js-user-status-expire-button ws-normal" title="Never">
      <span class="d-inline-block text-bold mb-1">Never</span>
      <div class="f6 lh-condensed">Keep this status until you clear your status or edit your status.</div>
    </button>
  </li>
  <li class="dropdown-divider" role="none"></li>
    <li>
      <button type="button" class="btn-link dropdown-item ws-normal js-user-status-expire-button" title="in 30 minutes" value="2019-09-20T23:24:35+08:00">
        in 30 minutes
      </button>
    </li>
    <li>
      <button type="button" class="btn-link dropdown-item ws-normal js-user-status-expire-button" title="in 1 hour" value="2019-09-20T23:54:35+08:00">
        in 1 hour
      </button>
    </li>
    <li>
      <button type="button" class="btn-link dropdown-item ws-normal js-user-status-expire-button" title="in 4 hours" value="2019-09-21T02:54:35+08:00">
        in 4 hours
      </button>
    </li>
    <li>
      <button type="button" class="btn-link dropdown-item ws-normal js-user-status-expire-button" title="today" value="2019-09-20T23:59:59+08:00">
        today
      </button>
    </li>
    <li>
      <button type="button" class="btn-link dropdown-item ws-normal js-user-status-expire-button" title="this week" value="2019-09-22T23:59:59+08:00">
        this week
      </button>
    </li>
</ul>

      <include-fragment class="js-user-status-org-picker" data-url="/users/status/organizations"></include-fragment>
    </div>
    <div class="d-flex flex-items-center flex-justify-between p-3 border-top">
      <button type="submit" disabled class="width-full btn btn-primary mr-2 js-user-status-submit">
        Set status
      </button>
      <button type="button" disabled class="width-full js-clear-user-status-button btn ml-2 ">
        Clear status
      </button>
    </div>

  </div>
  <div role="none" class="dropdown-divider"></div>


<a role="menuitem" class="dropdown-item" href="/xun1224" data-ga-click="Header, go to profile, text:your profile">Your profile</a>


<a role="menuitem" class="dropdown-item" href="/xun1224?tab=repositories" data-ga-click="Header, go to repositories, text:your repositories">Your repositories</a>

<a role="menuitem" class="dropdown-item" href="/xun1224?tab=projects" data-ga-click="Header, go to projects, text:your projects">Your projects</a>

<a role="menuitem" class="dropdown-item" href="/xun1224?tab=stars" data-ga-click="Header, go to starred repos, text:your stars">Your stars</a>
  <a role="menuitem" class="dropdown-item" href="https://gist.github.com/mine" data-ga-click="Header, your gists, text:your gists">Your gists</a>


<div role="none" class="dropdown-divider"></div>
<a role="menuitem" class="dropdown-item" href="https://help.github.com" data-ga-click="Header, go to help, text:help">Help</a>
<a role="menuitem" class="dropdown-item" href="/settings/profile" data-ga-click="Header, go to settings, icon:settings">Settings</a>
<!-- '"` --><!-- </textarea></xmp> --></option></form><form class="logout-form" action="/logout" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="&#x2713;" /><input type="hidden" name="authenticity_token" value="1ecgDjQUfuqGQKfF7jxrrAyylHy5u6Tst3b6tC9gIJzXrpMpiPYczSv8SlNIApW7APw5aAr6isO1idqqU/EDBQ==" />
  
  <button type="submit" class="dropdown-item dropdown-signout" data-ga-click="Header, sign out, icon:logout" role="menuitem">
    Sign out
  </button>

</div>

<div id="js-flash-container">

  <div class="border-bottom shelf intro-shelf js-notice mb-0 pb-4">

Learn Git and GitHub without any code!

Using the Hello World guide, you’ll start a branch, write comments, and open a pull request.

Read the guide

  <ul class="pagehead-actions">

<!-- '"` --><!-- </textarea></xmp> --></option></form><form data-remote="true" class="clearfix js-social-form js-social-container" action="/notifications/subscribe" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="&#x2713;" /><input type="hidden" name="authenticity_token" value="6P1hRfk7BH8peFuB6XeKJ2wTtraB5nQyxzaCjHvU+nrdoDOBd3nkRWwFICYn7tfWqC2i6X2UnRs3fj/dUXzFqA==" />      <input type="hidden" name="repository_id" value="94891589">

  <details class="details-reset details-overlay select-menu float-left">
    <summary class="select-menu-button float-left btn btn-sm btn-with-count" data-hydro-click="{&quot;event_type&quot;:&quot;repository.click&quot;,&quot;payload&quot;:{&quot;target&quot;:&quot;WATCH_BUTTON&quot;,&quot;repository_id&quot;:94891589,&quot;client_id&quot;:&quot;53310062.1541582027&quot;,&quot;originating_request_id&quot;:&quot;80B9:3BD5:A3F4FB:E9467A:5D84E827&quot;,&quot;originating_url&quot;:&quot;https://github.com/edocevol/strapdownify/blob/master/demo/readme.md&quot;,&quot;referrer&quot;:&quot;https://github.com/edocevol/strapdownify/tree/master/demo&quot;,&quot;user_id&quot;:30586336}}" data-hydro-click-hmac="c1b3ae34759bdce4502f9d17e861d25615407b45d9c8d3d543db1317fd2479b5" data-ga-click="Repository, click Watch settings, action:blob#show">          <span data-menu-button>
          <svg class="octicon octicon-eye v-align-text-bottom" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M8.06 2C3 2 0 8 0 8s3 6 8.06 6C13 14 16 8 16 8s-3-6-7.94-6zM8 12c-2.2 0-4-1.78-4-4 0-2.2 1.8-4 4-4 2.22 0 4 1.8 4 4 0 2.22-1.78 4-4 4zm2-4c0 1.11-.89 2-2 2-1.11 0-2-.89-2-2 0-1.11.89-2 2-2 1.11 0 2 .89 2 2z"/></svg>
          Watch
      </span>

Notifications

Not watching Be notified only when participating or @mentioned. Watch

        <button type="submit" name="do" value="release_only" class="select-menu-item width-full" aria-checked="false" role="menuitemradio">
          <svg class="octicon octicon-check select-menu-item-icon" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M12 5l-8 8-4-4 1.5-1.5L4 10l6.5-6.5L12 5z"/></svg>
          <div class="select-menu-item-text">
            <span class="select-menu-item-heading">Releases only</span>
            <span class="description">Be notified of new releases, and when participating or @mentioned.</span>
            <span class="hidden-select-button-text" data-menu-button-contents>
              <svg class="octicon octicon-eye v-align-text-bottom" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M8.06 2C3 2 0 8 0 8s3 6 8.06 6C13 14 16 8 16 8s-3-6-7.94-6zM8 12c-2.2 0-4-1.78-4-4 0-2.2 1.8-4 4-4 2.22 0 4 1.8 4 4 0 2.22-1.78 4-4 4zm2-4c0 1.11-.89 2-2 2-1.11 0-2-.89-2-2 0-1.11.89-2 2-2 1.11 0 2 .89 2 2z"/></svg>
              Unwatch releases
            </span>
          </div>
        </button>

        <button type="submit" name="do" value="subscribed" class="select-menu-item width-full" aria-checked="false" role="menuitemradio">
          <svg class="octicon octicon-check select-menu-item-icon" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M12 5l-8 8-4-4 1.5-1.5L4 10l6.5-6.5L12 5z"/></svg>
          <div class="select-menu-item-text">
            <span class="select-menu-item-heading">Watching</span>
            <span class="description">Be notified of all conversations.</span>
            <span class="hidden-select-button-text" data-menu-button-contents>
              <svg class="octicon octicon-eye v-align-text-bottom" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M8.06 2C3 2 0 8 0 8s3 6 8.06 6C13 14 16 8 16 8s-3-6-7.94-6zM8 12c-2.2 0-4-1.78-4-4 0-2.2 1.8-4 4-4 2.22 0 4 1.8 4 4 0 2.22-1.78 4-4 4zm2-4c0 1.11-.89 2-2 2-1.11 0-2-.89-2-2 0-1.11.89-2 2-2 1.11 0 2 .89 2 2z"/></svg>
              Unwatch
            </span>
          </div>
        </button>

        <button type="submit" name="do" value="ignore" class="select-menu-item width-full" aria-checked="false" role="menuitemradio">
          <svg class="octicon octicon-check select-menu-item-icon" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M12 5l-8 8-4-4 1.5-1.5L4 10l6.5-6.5L12 5z"/></svg>
          <div class="select-menu-item-text">
            <span class="select-menu-item-heading">Ignoring</span>
            <span class="description">Never be notified.</span>
            <span class="hidden-select-button-text" data-menu-button-contents>
              <svg class="octicon octicon-mute v-align-text-bottom" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M8 2.81v10.38c0 .67-.81 1-1.28.53L3 10H1c-.55 0-1-.45-1-1V7c0-.55.45-1 1-1h2l3.72-3.72C7.19 1.81 8 2.14 8 2.81zm7.53 3.22l-1.06-1.06-1.97 1.97-1.97-1.97-1.06 1.06L11.44 8 9.47 9.97l1.06 1.06 1.97-1.97 1.97 1.97 1.06-1.06L13.56 8l1.97-1.97z"/></svg>
              Stop ignoring
            </span>
          </div>
        </button>
      </div>
    </details-menu>
  </details>
    <a class="social-count js-social-count"
      href="/edocevol/strapdownify/watchers"
      aria-label="0 users are watching this repository">
      0
    </a>

Unstar 12 Star 12

Fork 5

  <h1 class="public ">
<svg class="octicon octicon-repo" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M4 9H3V8h1v1zm0-3H3v1h1V6zm0-2H3v1h1V4zm0-2H3v1h1V2zm8-1v12c0 .55-.45 1-1 1H6v2l-1.5-1.5L3 16v-2H1c-.55 0-1-.45-1-1V1c0-.55.45-1 1-1h10c.55 0 1 .45 1 1zm-1 10H1v2h2v-1h3v1h5v-2zm0-10H2v9h9V1z"/></svg>

edocevol/strapdownify

</div>

Code

<span itemscope itemtype="http://schema.org/ListItem" itemprop="itemListElement">
  <a itemprop="url" data-hotkey="g i" class="js-selected-navigation-item reponav-item" data-selected-links="repo_issues repo_labels repo_milestones /edocevol/strapdownify/issues" href="/edocevol/strapdownify/issues">
    <svg class="octicon octicon-issue-opened" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"/></svg>
    <span itemprop="name">Issues</span>
    <span class="Counter">0</span>
    <meta itemprop="position" content="2">

Pull requests 0

<a data-hotkey="g b" class="js-selected-navigation-item reponav-item" data-selected-links="repo_projects new_repo_project repo_project /edocevol/strapdownify/projects" href="/edocevol/strapdownify/projects">
  <svg class="octicon octicon-project" viewBox="0 0 15 16" version="1.1" width="15" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M10 12h3V2h-3v10zm-4-2h3V2H6v8zm-4 4h3V2H2v12zm-1 1h13V1H1v14zM14 0H1a1 1 0 0 0-1 1v14a1 1 0 0 0 1 1h13a1 1 0 0 0 1-1V1a1 1 0 0 0-1-1z"/></svg>
  Projects
  <span class="Counter" >0</span>

<a class="js-selected-navigation-item reponav-item" data-hotkey="g w" data-selected-links="repo_wiki /edocevol/strapdownify/wiki" href="/edocevol/strapdownify/wiki">
  <svg class="octicon octicon-book" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M3 5h4v1H3V5zm0 3h4V7H3v1zm0 2h4V9H3v1zm11-5h-4v1h4V5zm0 2h-4v1h4V7zm0 2h-4v1h4V9zm2-6v9c0 .55-.45 1-1 1H9.5l-1 1-1-1H2c-.55 0-1-.45-1-1V3c0-.55.45-1 1-1h5.5l1 1 1-1H15c.55 0 1 .45 1 1zm-8 .5L7.5 3H2v9h6V3.5zm7-.5H9.5l-.5.5V12h6V3z"/></svg>
  Wiki

Security Insights

<span itemscope itemtype="http://schema.org/ListItem" itemprop="itemListElement">
  <a class="js-selected-navigation-item selected reponav-item" itemprop="url" aria-current="page" data-selected-links="repo_source repo_downloads repo_commits repo_releases repo_tags repo_branches repo_packages /edocevol/strapdownify" href="/edocevol/strapdownify">
    <span itemprop="name">Code</span>
    <meta itemprop="position" content="1">

  <span itemscope itemtype="http://schema.org/ListItem" itemprop="itemListElement">
    <a itemprop="url" class="js-selected-navigation-item reponav-item" data-selected-links="repo_issues repo_labels repo_milestones /edocevol/strapdownify/issues" href="/edocevol/strapdownify/issues">
      <span itemprop="name">Issues</span>
      <span class="Counter">0</span>
      <meta itemprop="position" content="2">

<span itemscope itemtype="http://schema.org/ListItem" itemprop="itemListElement">
  <a itemprop="url" class="js-selected-navigation-item reponav-item" data-selected-links="repo_pulls checks /edocevol/strapdownify/pulls" href="/edocevol/strapdownify/pulls">
    <span itemprop="name">Pull requests</span>
    <span class="Counter">0</span>
    <meta itemprop="position" content="3">

  <span itemscope itemtype="http://schema.org/ListItem" itemprop="itemListElement">
    <a itemprop="url" class="js-selected-navigation-item reponav-item" data-selected-links="repo_projects new_repo_project repo_project /edocevol/strapdownify/projects" href="/edocevol/strapdownify/projects">
      <span itemprop="name">Projects</span>
      <span class="Counter">0</span>
      <meta itemprop="position" content="4">

  <span itemscope itemtype="http://schema.org/ListItem" itemprop="itemListElement">
    <a itemprop="url" class="js-selected-navigation-item reponav-item" data-selected-links="repo_wiki /edocevol/strapdownify/wiki" href="/edocevol/strapdownify/wiki">
      <span itemprop="name">Wiki</span>
      <meta itemprop="position" content="5">

  <a itemprop="url" class="js-selected-navigation-item reponav-item" data-selected-links="security alerts policy code_scanning /edocevol/strapdownify/security/advisories" href="/edocevol/strapdownify/security/advisories">
    <span itemprop="name">Security</span>
    <meta itemprop="position" content="6">

Pulse Community

<a class="d-none js-permalink-shortcut" data-hotkey="y" href="/edocevol/strapdownify/blob/a237f48c1295effebf4188932c400302ad7c3503/demo/readme.md">Permalink</a>

<!-- blob contrib key: blob_contributors:v21:1b635eb219f9afc654aeabeddc73a2f5 -->
  

<div class="d-flex flex-items-start flex-shrink-0 pb-3 flex-column flex-md-row">
  <span class="d-flex flex-justify-between width-full width-md-auto">

Branch: master

    <div class="BtnGroup flex-shrink-0 d-md-none">
      <a href="/edocevol/strapdownify/find/master"
            class="js-pjax-capture-input btn btn-sm BtnGroup-item"
            data-pjax
            data-hotkey="t">
        Find file
      </a>
      <clipboard-copy value="demo/readme.md" class="btn btn-sm BtnGroup-item">
        Copy path
      </clipboard-copy>
    </div>
  </span>
  <h2 id="blob-path" class="breadcrumb flex-auto min-width-0 text-normal flex-md-self-center ml-md-2 mr-md-3 my-2 my-md-0">
    <span class="js-repo-root text-bold"><span class="js-path-segment"><a data-pjax="true" href="/edocevol/strapdownify"><span>strapdownify</span></a></span></span><span class="separator">/</span><span class="js-path-segment"><a data-pjax="true" href="/edocevol/strapdownify/tree/master/demo"><span>demo</span></a></span><span class="separator">/</span><strong class="final-path">readme.md</strong>
  </h2>

  <div class="BtnGroup flex-shrink-0 d-none d-md-inline-block">
    <a href="/edocevol/strapdownify/find/master"
          class="js-pjax-capture-input btn btn-sm BtnGroup-item"
          data-pjax
          data-hotkey="t">
      Find file
    </a>
    <clipboard-copy value="demo/readme.md" class="btn btn-sm BtnGroup-item">
      Copy path
    </clipboard-copy>
  </div>
</div>

jsper 完成代码的修改和demo的编写 39497e9 Jun 20, 2017

<div class="Box-body d-flex flex-items-center flex-auto f6 border-bottom-0 flex-wrap" >
  <details class="details-reset details-overlay details-overlay-dark lh-default text-gray-dark float-left mr-2" id="blob_contributors_box">
    <summary class="btn-link">
      <span><strong>0</strong> contributors</span>
    </summary>
    <details-dialog
      class="Box Box--overlay d-flex flex-column anim-fade-in fast"
      aria-label="Users who have contributed to this file"
      src="/edocevol/strapdownify/contributors/master/demo/readme.md/list" preload>
      <div class="Box-header">
        <button class="Box-btn-octicon btn-octicon float-right" type="button" aria-label="Close dialog" data-close-dialog>
          <svg class="octicon octicon-x" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7.48 8l3.75 3.75-1.48 1.48L6 9.48l-3.75 3.75-1.48-1.48L4.52 8 .77 4.25l1.48-1.48L6 6.52l3.75-3.75 1.48 1.48L7.48 8z"/></svg>
        </button>
        <h3 class="Box-title">
          Users who have contributed to this file
        </h3>
      </div>
      <include-fragment class="octocat-spinner my-3" aria-label="Loading..."></include-fragment>
    </details-dialog>
  </details>
</div>

<div class="Box mt-3 position-relative">

373 lines (323 sloc) 13.7 KB

<div class="BtnGroup">
  <a id="raw-url" class="btn btn-sm BtnGroup-item" href="/edocevol/strapdownify/raw/master/demo/readme.md">Raw</a>
    <a class="btn btn-sm js-update-url-with-hash BtnGroup-item" data-hotkey="b" href="/edocevol/strapdownify/blame/master/demo/readme.md">Blame</a>
  <a rel="nofollow" class="btn btn-sm BtnGroup-item" href="/edocevol/strapdownify/commits/master/demo/readme.md">History</a>
</div>


<div>
        <a class="btn-octicon tooltipped tooltipped-nw hide-sm"
           href="https://desktop.github.com"
           aria-label="Open this file in GitHub Desktop"
           data-ga-click="Repository, open with desktop, type:windows">
            <svg class="octicon octicon-device-desktop" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M15 2H1c-.55 0-1 .45-1 1v9c0 .55.45 1 1 1h5.34c-.25.61-.86 1.39-2.34 2h8c-1.48-.61-2.09-1.39-2.34-2H15c.55 0 1-.45 1-1V3c0-.55-.45-1-1-1zm0 9H1V3h14v8z"/></svg>
        </a>

        <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="inline-form js-update-url-with-hash" action="/edocevol/strapdownify/edit/master/demo/readme.md" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="&#x2713;" /><input type="hidden" name="authenticity_token" value="KQsqXTKjOHtEpZVRVDJt2GWGEPkdOxE55KKtu/pHzwWzP/GW4az0uroWC4yP8rISYudHOCVx7YB+XGRBpao50Q==" />
          <button class="btn-octicon tooltipped tooltipped-nw" type="submit"
            aria-label="Fork this project and edit the file" data-hotkey="e" data-disable-with>
            <svg class="octicon octicon-pencil" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M0 12v3h3l8-8-3-3-8 8zm3 2H1v-2h1v1h1v1zm10.3-9.3L12 6 9 3l1.3-1.3a.996.996 0 0 1 1.41 0l1.59 1.59c.39.39.39 1.02 0 1.41z"/></svg>
          </button>

title
通过浏览器加载的方式使用strapdown.js来渲染markdown

文章导读

如何手动调用strapdown.js的渲染方法
html下如何将markdown 转换为html
如何拓展strapdown.js的功能
有哪些好用的markdown渲染库

本文关联的代码

作者修改后的strapdown.js代码库的github地址如下： https://github.com/sixtrees/strapdownify

项目中，附有三个demo，详情见文末，demo的启动请使用tomcat等web容器进行启动或者使用webstorm等IDE进行预览。

说明

strapdown是一个很棒的markdown解析库（当然是基于javascript）的了，但是作者的目的可能是尽可能的适用于所有的场景。所以，作者在官网给出了如下的使用说明

<!DOCTYPE html>
<html>
<title>Hello Strapdown</title>
<xmp theme="united" style="display:none;">
Markdown text goes in here

Chapter 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua.
Chapter 2

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
</xmp>
<script src="http://strapdownjs.com/v/0.2/strapdown.js"></script>
</html>

从上面的代码可以看出，我们需要在html中定义一个xmp或者textarea的html元素（当然，如果你不看源码的话，是不会发现也可以用textarea来替代xmp元素的）。然后，根据源码中的描述，strapdown会获取我们的xmp中的markdown代码，然后利用document来解析我们页面中的link、script、meta信息，然后将利用document.createElement方法动态的对我们的当前页重新进行渲染。

为什么要修改作者的代码库

从上一节的描述中，我们可以了解到，原来的解析方式会替换我们的原始页面，也就是渲染过后的页面只会保留最基本的内容（渲染出来的markdown）。因此，我们想有一种方式可以按需进行渲染。

因此，我们对原始的strapdown.js进行了如下的修改(替换了原始文件的最后一个自执行函数)：

/**
 * 根据传入的$src来获取markdown的内容并转为html显示在$desc元素下
 * 如果$desc元素为undefine，则显示$src元素中
 * @param $src markdown内容的载体
 * @param $desc 渲染过后markdown内容的载体
 */
var markdown = function ($src, $desc) {
<span class="pl-k">if</span> ($desc <span class="pl-k">==</span> <span class="pl-c1">undefined</span>) {
    $desc <span class="pl-k">=</span> $src;
}
<span class="pl-c1">document</span>.<span class="pl-c1">body</span>.<span class="pl-c1">style</span>.<span class="pl-c1">display</span> <span class="pl-k">=</span> <span class="pl-s"><span class="pl-pds">'</span>none<span class="pl-pds">'</span></span>;
<span class="pl-k">var</span> markdownEl <span class="pl-k">=</span> <span class="pl-c1">document</span>.<span class="pl-c1">getElementById</span>($src);<span class="pl-c"><span class="pl-c">//</span>markdown载体</span>
<span class="pl-k">var</span> htmlEl <span class="pl-k">=</span> <span class="pl-c1">document</span>.<span class="pl-c1">getElementById</span>($desc); <span class="pl-c"><span class="pl-c">//</span>html载体</span>
<span class="pl-k">var</span> markdown <span class="pl-k">=</span> <span class="pl-smi">markdownEl</span>.<span class="pl-smi">innerHTML</span>;

<span class="pl-c"><span class="pl-c">//</span> Generate Markdown</span>
<span class="pl-k">var</span> html <span class="pl-k">=</span> <span class="pl-en">marked</span>(markdown);
<span class="pl-smi">htmlEl</span>.<span class="pl-smi">innerHTML</span> <span class="pl-k">=</span> html;

<span class="pl-c"><span class="pl-c">//</span> Prettify</span>
<span class="pl-k">var</span> codeEls <span class="pl-k">=</span> <span class="pl-c1">document</span>.<span class="pl-c1">getElementsByTagName</span>(<span class="pl-s"><span class="pl-pds">'</span>code<span class="pl-pds">'</span></span>);
<span class="pl-k">for</span> (<span class="pl-k">var</span> i <span class="pl-k">=</span> <span class="pl-c1">0</span>, ii <span class="pl-k">=</span> <span class="pl-smi">codeEls</span>.<span class="pl-c1">length</span>; i <span class="pl-k">&lt;</span> ii; i<span class="pl-k">++</span>) {
    <span class="pl-k">var</span> codeEl <span class="pl-k">=</span> codeEls[i];
    <span class="pl-k">var</span> lang <span class="pl-k">=</span> <span class="pl-smi">codeEl</span>.<span class="pl-c1">className</span>;
    <span class="pl-smi">codeEl</span>.<span class="pl-c1">className</span> <span class="pl-k">=</span> <span class="pl-s"><span class="pl-pds">'</span>prettyprint lang-<span class="pl-pds">'</span></span> <span class="pl-k">+</span> lang;
}
<span class="pl-en">prettyPrint</span>();

<span class="pl-c"><span class="pl-c">//</span> Style tables</span>
<span class="pl-k">var</span> tableEls <span class="pl-k">=</span> <span class="pl-c1">document</span>.<span class="pl-c1">getElementsByTagName</span>(<span class="pl-s"><span class="pl-pds">'</span>table<span class="pl-pds">'</span></span>);
<span class="pl-k">for</span> (<span class="pl-k">var</span> i <span class="pl-k">=</span> <span class="pl-c1">0</span>, ii <span class="pl-k">=</span> <span class="pl-smi">tableEls</span>.<span class="pl-c1">length</span>; i <span class="pl-k">&lt;</span> ii; i<span class="pl-k">++</span>) {
    <span class="pl-k">var</span> tableEl <span class="pl-k">=</span> tableEls[i];
    <span class="pl-smi">tableEl</span>.<span class="pl-c1">className</span> <span class="pl-k">=</span> <span class="pl-s"><span class="pl-pds">'</span>table table-striped table-bordered<span class="pl-pds">'</span></span>;
}
<span class="pl-c"><span class="pl-c">//</span> All done - show body</span>
<span class="pl-c1">document</span>.<span class="pl-c1">body</span>.<span class="pl-c1">style</span>.<span class="pl-c1">display</span> <span class="pl-k">=</span> <span class="pl-s"><span class="pl-pds">'</span><span class="pl-pds">'</span></span>;

};
/**
 * 根据传入的$data作为markdown的内容并转为html显示在$desc元素下
 * @param $data markdown内容
 * @param $desc 渲染过后markdown内容的载体
 */
var markdownFromText = function ($data, $desc) {
<span class="pl-c"><span class="pl-c">//</span> Generate Markdown</span>
<span class="pl-k">var</span> html <span class="pl-k">=</span> <span class="pl-en">marked</span>($data);
<span class="pl-c1">document</span>.<span class="pl-c1">getElementById</span>($desc).<span class="pl-smi">innerHTML</span> <span class="pl-k">=</span> html;

<span class="pl-c"><span class="pl-c">//</span> Prettify</span>
<span class="pl-k">var</span> codeEls <span class="pl-k">=</span> <span class="pl-c1">document</span>.<span class="pl-c1">getElementsByTagName</span>(<span class="pl-s"><span class="pl-pds">'</span>code<span class="pl-pds">'</span></span>);
<span class="pl-k">for</span> (<span class="pl-k">var</span> i <span class="pl-k">=</span> <span class="pl-c1">0</span>, ii <span class="pl-k">=</span> <span class="pl-smi">codeEls</span>.<span class="pl-c1">length</span>; i <span class="pl-k">&lt;</span> ii; i<span class="pl-k">++</span>) {
    <span class="pl-k">var</span> codeEl <span class="pl-k">=</span> codeEls[i];
    <span class="pl-k">var</span> lang <span class="pl-k">=</span> <span class="pl-smi">codeEl</span>.<span class="pl-c1">className</span>;
    <span class="pl-smi">codeEl</span>.<span class="pl-c1">className</span> <span class="pl-k">=</span> <span class="pl-s"><span class="pl-pds">'</span>prettyprint lang-<span class="pl-pds">'</span></span> <span class="pl-k">+</span> lang;
}
<span class="pl-en">prettyPrint</span>();

<span class="pl-c"><span class="pl-c">//</span> Style tables</span>
<span class="pl-k">var</span> tableEls <span class="pl-k">=</span> <span class="pl-c1">document</span>.<span class="pl-c1">getElementsByTagName</span>(<span class="pl-s"><span class="pl-pds">'</span>table<span class="pl-pds">'</span></span>);
<span class="pl-k">for</span> (<span class="pl-k">var</span> i <span class="pl-k">=</span> <span class="pl-c1">0</span>, ii <span class="pl-k">=</span> <span class="pl-smi">tableEls</span>.<span class="pl-c1">length</span>; i <span class="pl-k">&lt;</span> ii; i<span class="pl-k">++</span>) {
    <span class="pl-k">var</span> tableEl <span class="pl-k">=</span> tableEls[i];
    <span class="pl-smi">tableEl</span>.<span class="pl-c1">className</span> <span class="pl-k">=</span> <span class="pl-s"><span class="pl-pds">'</span>table table-striped table-bordered<span class="pl-pds">'</span></span>;
}

};

使用方式

由于我们对作者的原始库进行了大量的代码精简，因此，样式的选择，我们需要手动的加载themes文件夹下的样式主题。

下面给出两个实际的使用案例

案例1

调用markdown传递1个参数，可以原始的markdown载体元素作为渲染后的html的载体

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>strapdown渲染markdown的demo</title>
    <link href="./static/bootstrap-3.3.5/css/bootstrap.min.css" rel="stylesheet">
    <link href="./static/css/reset.css" rel="stylesheet">
    <link href="./static/css/site.css" rel="stylesheet">
    <link href="./static/css/lib.css" rel="stylesheet">
    <!--加载样式-->
    <link href="../strapdown/strapdown.css" rel="stylesheet">
    <link href="../strapdown/themes/readable.min.css" rel="stylesheet">
</head>
<body>
<div class="bt-warp bge6">
    <div id="container" class="container-fluid">
        <div class="sidebar-scroll">
            <div class="sidebar-auto">
                <div id="task" class="task cw" onclick="task()"></div>
                <h3 class="mypcip"><span class="f14 cw" id="serverip">localhost</span></h3>
                <ul class="menu">
                    <li><a class="menu_home" href="index.html">demo1</a></li>
                    <li><a class="menu_folder" href="index2.html">demo2</a></li>
                    <li><a class="menu_fork" href="http://github.com/sixtrees/strapdownify">fork</a></li>
                </ul>
            </div>
        </div>
        <div class="main-content">
            <div class="container-fluid" style="padding-bottom:50px">
                <div id="mdcontent">
            <span class="pl-k">&lt;</span><span class="pl-k">/</span>div<span class="pl-k">&gt;</span>
        <span class="pl-k">&lt;</span><span class="pl-k">/</span>div<span class="pl-k">&gt;</span>
    <span class="pl-k">&lt;</span><span class="pl-k">/</span>div<span class="pl-k">&gt;</span>
<span class="pl-k">&lt;</span><span class="pl-k">/</span>div<span class="pl-k">&gt;</span>


<span class="pl-k">&lt;</span>div <span class="pl-k">class</span><span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span>footer bgw<span class="pl-pds">"</span></span><span class="pl-k">&gt;</span>
    markdown内容渲染框架 ©<span class="pl-c1">2017</span><span class="pl-k">-</span><span class="pl-c1">2017</span>
    <span class="pl-k">&lt;</span>a style<span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span>margin-left:20px;color:#20a53a;<span class="pl-pds">"</span></span> href<span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span>http://github.com/sixtrees/strapdownify<span class="pl-pds">"</span></span>
       target<span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span>_blank<span class="pl-pds">"</span></span><span class="pl-k">&gt;</span>strapdownify on github<span class="pl-k">&lt;</span><span class="pl-k">/</span>a<span class="pl-k">&gt;</span>
<span class="pl-k">&lt;</span><span class="pl-k">/</span>div<span class="pl-k">&gt;</span>

</div>
<script src="./static/js/jquery-1.10.2.min.js"></script>
<script src="./static/js/bootstrap.min.js"></script>
<script src="./static/layer/layer.js"></script>
<script src="../strapdown/strapdown.js"></script>
<script>
var loadT = layer.msg('正在加载...', {icon: 16, time: 0, shade: [0.3, '#000']});
$.ajax({
url: 'readme.md',
type: "POST",
dataType: "text",
success: function (data) {
markdownFromText(data, "mdcontent");
layer.close(loadT);
}
});
</script>
</body>
</html>

案例2

调用markdown传递两个参数，可以原始的markdown载体元素需要手动设置为隐藏

<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="icon" href="favicon.ico" type="image/x-icon"/>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
    <title>文件管理</title>
    <link rel="stylesheet" type="text/css" href="/static/css/reset.css">
    <link rel="stylesheet" type="text/css" href="/static/css/login.css">
</head>
<body>
<div class="main">
<div class="login">
<form class="loginform" method="post" action="/login" onsubmit="return false;">
<div class="rlogo">系统登录</div>
<div class="line"><input class="inputtxt" value="" name="userName" datatype="" nullmsg="请填写账号"
errormsg="格式不对" placeholder="账号" type="text">
<div class="Validform_checktip"></div>
</div>
<div class="line"><input class="inputtxt" name="password" value="" datatype="" nullmsg="请填写密码"
errormsg="请填写密码" placeholder="密码" type="password">
<div class="Validform_checktip"></div>
</div>
        <span class="pl-k">&lt;</span>div <span class="pl-k">class</span><span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span>line yzm<span class="pl-pds">"</span></span><span class="pl-k">&gt;</span>
            <span class="pl-k">&lt;</span>input type<span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span>text<span class="pl-pds">"</span></span> <span class="pl-k">class</span><span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span>inputtxt<span class="pl-pds">"</span></span> name<span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span>code<span class="pl-pds">"</span></span> nullmsg<span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span>请填写验证码<span class="pl-pds">"</span></span> errormsg<span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span>验证码不对<span class="pl-pds">"</span></span> datatype<span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span>*<span class="pl-pds">"</span></span>
                   placeholder<span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span>请填写验证码<span class="pl-pds">"</span></span><span class="pl-k">&gt;</span>
            <span class="pl-k">&lt;</span>div <span class="pl-k">class</span><span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span>Validform_checktip<span class="pl-pds">"</span></span><span class="pl-k">&gt;&lt;</span><span class="pl-k">/</span>div<span class="pl-k">&gt;</span>
            <span class="pl-k">&lt;</span>img width<span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span>100<span class="pl-pds">"</span></span> height<span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span>40<span class="pl-pds">"</span></span> <span class="pl-k">class</span><span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span>passcode<span class="pl-pds">"</span></span>
                 onClick<span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span>this.src=this.src.split('?')[0] + '?'+new Date().getTime()<span class="pl-pds">"</span></span> src<span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span>/code<span class="pl-pds">"</span></span>
                 style<span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span>border: 1px solid #ccc; float: right;<span class="pl-pds">"</span></span> title<span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span>点击换一张<span class="pl-pds">"</span></span><span class="pl-k">&gt;</span>
        <span class="pl-k">&lt;</span><span class="pl-k">/</span>div<span class="pl-k">&gt;</span>

        <span class="pl-k">&lt;</span>div <span class="pl-k">class</span><span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span>login_btn<span class="pl-pds">"</span></span><span class="pl-k">&gt;&lt;</span>input id<span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span>login-button<span class="pl-pds">"</span></span> value<span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span>登录<span class="pl-pds">"</span></span> type<span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span>submit<span class="pl-pds">"</span></span><span class="pl-k">&gt;&lt;</span><span class="pl-k">/</span>div<span class="pl-k">&gt;</span>
        <span class="pl-k">&lt;</span>div <span class="pl-k">class</span><span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span>line<span class="pl-pds">"</span></span><span class="pl-k">&gt;</span>
            <span class="pl-k">&lt;</span>p <span class="pl-k">class</span><span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span>pwinfo<span class="pl-pds">"</span></span><span class="pl-k">&gt;</span><span class="pl-c1">3</span>次以上登录错误将会出现验证码<span class="pl-k">&lt;</span><span class="pl-k">/</span>p<span class="pl-k">&gt;</span>
            <span class="pl-k">&lt;</span>a <span class="pl-k">class</span><span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span>resetpw<span class="pl-pds">"</span></span> href<span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span>javascript:void(0);<span class="pl-pds">"</span></span> target<span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span>_blank<span class="pl-pds">"</span></span><span class="pl-k">&gt;</span>忘记密码<span class="pl-k">&gt;&gt;</span><span class="pl-k">&lt;</span><span class="pl-k">/</span>a<span class="pl-k">&gt;</span>
        <span class="pl-k">&lt;</span><span class="pl-k">/</span>div<span class="pl-k">&gt;</span>
    <span class="pl-k">&lt;</span><span class="pl-k">/</span>form<span class="pl-k">&gt;</span>
<span class="pl-k">&lt;</span><span class="pl-k">/</span>div<span class="pl-k">&gt;</span>

</div>
<script type="text/javascript" src="/static/js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="/static/layer/layer.js"></script>
<script type="text/javascript" src="/static/js/Validform_v5.3.2_min.js"></script>
<script type="text/javascript">
$(function () {
    <span class="pl-en">$</span>(<span class="pl-s"><span class="pl-pds">"</span>.loginform<span class="pl-pds">"</span></span>).<span class="pl-en">Validform</span>({
        <span class="pl-en">tiptype</span><span class="pl-k">:</span> <span class="pl-k">function</span> (<span class="pl-smi">msg</span>, <span class="pl-smi">o</span>, <span class="pl-smi">cssctl</span>) {
            <span class="pl-k">if</span> (<span class="pl-k">!</span><span class="pl-smi">o</span>.<span class="pl-smi">obj</span>.<span class="pl-en">is</span>(<span class="pl-s"><span class="pl-pds">"</span>form<span class="pl-pds">"</span></span>)) {
                <span class="pl-k">var</span> objtip <span class="pl-k">=</span> <span class="pl-smi">o</span>.<span class="pl-smi">obj</span>.<span class="pl-en">siblings</span>(<span class="pl-s"><span class="pl-pds">"</span>.Validform_checktip<span class="pl-pds">"</span></span>);
                <span class="pl-en">cssctl</span>(objtip, <span class="pl-smi">o</span>.<span class="pl-c1">type</span>);
                <span class="pl-smi">objtip</span>.<span class="pl-c1">text</span>(msg);
            }
        }
    });
});

<span class="pl-en">$</span>(<span class="pl-s"><span class="pl-pds">'</span>#login-button<span class="pl-pds">'</span></span>).<span class="pl-c1">click</span>(<span class="pl-k">function</span> () {
    <span class="pl-k">var</span> userName <span class="pl-k">=</span> <span class="pl-en">$</span>(<span class="pl-s"><span class="pl-pds">"</span>input[name='userName']<span class="pl-pds">"</span></span>).<span class="pl-en">val</span>();
    <span class="pl-k">var</span> password <span class="pl-k">=</span> <span class="pl-en">$</span>(<span class="pl-s"><span class="pl-pds">"</span>input[name='password']<span class="pl-pds">"</span></span>).<span class="pl-en">val</span>();
    <span class="pl-k">var</span> code <span class="pl-k">=</span> <span class="pl-en">$</span>(<span class="pl-s"><span class="pl-pds">"</span>input[name='code']<span class="pl-pds">"</span></span>).<span class="pl-en">val</span>();
    <span class="pl-k">if</span> (userName <span class="pl-k">==</span> <span class="pl-s"><span class="pl-pds">'</span><span class="pl-pds">'</span></span> <span class="pl-k">||</span> password <span class="pl-k">==</span> <span class="pl-s"><span class="pl-pds">'</span><span class="pl-pds">'</span></span>) {
        <span class="pl-smi">layer</span>.<span class="pl-en">msg</span>(<span class="pl-s"><span class="pl-pds">'</span>表单错误,请重新输入!<span class="pl-pds">'</span></span>, {icon<span class="pl-k">:</span> <span class="pl-c1">2</span>});
        <span class="pl-k">return</span>;
    }

    <span class="pl-k">var</span> data <span class="pl-k">=</span> <span class="pl-s"><span class="pl-pds">'</span>userName=<span class="pl-pds">'</span></span> <span class="pl-k">+</span> userName <span class="pl-k">+</span> <span class="pl-s"><span class="pl-pds">'</span>&amp;password=<span class="pl-pds">'</span></span> <span class="pl-k">+</span> password <span class="pl-k">+</span> <span class="pl-s"><span class="pl-pds">'</span>&amp;code=<span class="pl-pds">'</span></span> <span class="pl-k">+</span> code;
    <span class="pl-k">var</span> loadT <span class="pl-k">=</span> <span class="pl-smi">layer</span>.<span class="pl-en">msg</span>(<span class="pl-s"><span class="pl-pds">'</span>正在登陆...<span class="pl-pds">'</span></span>, {icon<span class="pl-k">:</span> <span class="pl-c1">16</span>, time<span class="pl-k">:</span> <span class="pl-c1">0</span>, shade<span class="pl-k">:</span> [<span class="pl-c1">0.3</span>, <span class="pl-s"><span class="pl-pds">'</span>#000<span class="pl-pds">'</span></span>]});
    <span class="pl-smi">$</span>.<span class="pl-en">post</span>(<span class="pl-s"><span class="pl-pds">'</span>/login<span class="pl-pds">'</span></span>, data, <span class="pl-k">function</span> (<span class="pl-smi">rdata</span>) {
        <span class="pl-smi">layer</span>.<span class="pl-c1">close</span>(loadT);
        <span class="pl-k">if</span> (<span class="pl-smi">rdata</span>.<span class="pl-c1">code</span> <span class="pl-k">!=</span> <span class="pl-s"><span class="pl-pds">"</span>1<span class="pl-pds">"</span></span>) {
            <span class="pl-en">$</span>(<span class="pl-s"><span class="pl-pds">"</span>#errorStr<span class="pl-pds">"</span></span>).<span class="pl-en">html</span>(<span class="pl-smi">rdata</span>.<span class="pl-smi">msg</span>);
            <span class="pl-en">$</span>(<span class="pl-s"><span class="pl-pds">"</span>input[name='password']<span class="pl-pds">"</span></span>).<span class="pl-en">val</span>(<span class="pl-s"><span class="pl-pds">'</span><span class="pl-pds">'</span></span>);
            num <span class="pl-k">=</span> <span class="pl-smi">rdata</span>.<span class="pl-smi">remainTimes</span>;
            <span class="pl-k">if</span> (num <span class="pl-k">&lt;</span> <span class="pl-c1">5</span>) {
                <span class="pl-en">$</span>(<span class="pl-s"><span class="pl-pds">"</span>.yzm<span class="pl-pds">"</span></span>).<span class="pl-en">show</span>();
                <span class="pl-en">$</span>(<span class="pl-s"><span class="pl-pds">"</span>.login<span class="pl-pds">"</span></span>).<span class="pl-en">css</span>(<span class="pl-s"><span class="pl-pds">"</span>height<span class="pl-pds">"</span></span>, <span class="pl-s"><span class="pl-pds">"</span>332px<span class="pl-pds">"</span></span>);
                <span class="pl-en">$</span>(<span class="pl-s"><span class="pl-pds">"</span>input[name='code']<span class="pl-pds">"</span></span>).<span class="pl-en">val</span>(<span class="pl-s"><span class="pl-pds">'</span><span class="pl-pds">'</span></span>);
                <span class="pl-en">$</span>(<span class="pl-s"><span class="pl-pds">"</span>.passcode<span class="pl-pds">"</span></span>).<span class="pl-c1">click</span>();
            }
            <span class="pl-smi">layer</span>.<span class="pl-en">msg</span>(<span class="pl-smi">rdata</span>.<span class="pl-smi">msg</span>, {icon<span class="pl-k">:</span> <span class="pl-c1">2</span>});
            <span class="pl-k">return</span>;
        }
        <span class="pl-smi">layer</span>.<span class="pl-en">msg</span>(<span class="pl-smi">rdata</span>.<span class="pl-smi">msg</span>, {icon<span class="pl-k">:</span> <span class="pl-c1">6</span>, time<span class="pl-k">:</span> <span class="pl-c1">0</span>, shade<span class="pl-k">:</span> [<span class="pl-c1">0.3</span>, <span class="pl-s"><span class="pl-pds">'</span>#000<span class="pl-pds">'</span></span>]});
        <span class="pl-c1">window</span>.<span class="pl-c1">location</span>.<span class="pl-c1">href</span> <span class="pl-k">=</span> <span class="pl-s"><span class="pl-pds">'</span>/<span class="pl-pds">'</span></span>;
    });
});

</script>
</body>
</html>

案例3

调用markdownFromText

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>strapdown渲染markdown的demo</title>
    <link href="./static/bootstrap-3.3.5/css/bootstrap.min.css" rel="stylesheet">
    <link href="./static/css/reset.css" rel="stylesheet">
    <link href="./static/css/site.css" rel="stylesheet">
    <link href="./static/css/lib.css" rel="stylesheet">
    <!--加载样式-->
    <link href="../strapdown/strapdown.css" rel="stylesheet">
    <link href="../strapdown/themes/readable.min.css" rel="stylesheet">
</head>
<body>
<div class="bt-warp bge6">
    <div id="container" class="container-fluid">
        <div class="sidebar-scroll">
            <div class="sidebar-auto">
                <div id="task" class="task cw" onclick="task()"></div>
                <h3 class="mypcip"><span class="f14 cw" id="serverip">localhost</span></h3>
                <ul class="menu">
                    <li><a class="menu_home" href="index.html">demo1</a></li>
                    <li><a class="menu_folder" href="index2.html">demo2</a></li>
                    <li><a class="menu_fork" href="http://github.com/sixtrees/strapdownify">fork</a></li>
                </ul>
            </div>
        </div>
        <div class="main-content">
            <div class="container-fluid" style="padding-bottom:50px">
                <div id="mdcontent">
            <span class="pl-k">&lt;</span><span class="pl-k">/</span>div<span class="pl-k">&gt;</span>
        <span class="pl-k">&lt;</span><span class="pl-k">/</span>div<span class="pl-k">&gt;</span>
    <span class="pl-k">&lt;</span><span class="pl-k">/</span>div<span class="pl-k">&gt;</span>
<span class="pl-k">&lt;</span><span class="pl-k">/</span>div<span class="pl-k">&gt;</span>


<span class="pl-k">&lt;</span>div <span class="pl-k">class</span><span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span>footer bgw<span class="pl-pds">"</span></span><span class="pl-k">&gt;</span>
    markdown内容渲染框架 ©<span class="pl-c1">2017</span><span class="pl-k">-</span><span class="pl-c1">2017</span>
    <span class="pl-k">&lt;</span>a style<span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span>margin-left:20px;color:#20a53a;<span class="pl-pds">"</span></span> href<span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span>http://github.com/sixtrees/strapdownify<span class="pl-pds">"</span></span>
       target<span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span>_blank<span class="pl-pds">"</span></span><span class="pl-k">&gt;</span>strapdownify on github<span class="pl-k">&lt;</span><span class="pl-k">/</span>a<span class="pl-k">&gt;</span>
<span class="pl-k">&lt;</span><span class="pl-k">/</span>div<span class="pl-k">&gt;</span>

</div>
<script src="./static/js/jquery-1.10.2.min.js"></script>
<script src="./static/js/bootstrap.min.js"></script>
<script src="./static/layer/layer.js"></script>
<script src="../strapdown/strapdown.js"></script>
<script>
var loadT = layer.msg('正在加载...', {icon: 16, time: 0, shade: [0.3, '#000']});
$.ajax({
url: 'readme.md',
type: "POST",
dataType: "text",
success: function (data) {
markdownFromText(data, "mdcontent");
layer.close(loadT);
}
});
</script>
</body>
</html>

</div>

Go

</main>

Terms
Privacy
Security
Status
Help

<a aria-label="Homepage" title="GitHub" class="footer-octicon d-none d-lg-block mx-lg-4" href="https://github.com">
  <svg height="24" class="octicon octicon-mark-github" viewBox="0 0 16 16" version="1.1" width="24" aria-hidden="true"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"/></svg>

Contact GitHub
Pricing
API
Training
Blog
About

</ul>

You can’t perform that action at this time.

<script crossorigin="anonymous" integrity="sha512-yqjg2OirIDjBtHu3resAcgs0CyPmp9qdzxMDN+jQxXw2qWsk5gwVa9do9ujUsq5zMLxfmlFffwlYkKgQQObjEg==" type="application/javascript" src="https://github.githubassets.com/assets/frameworks-77628c42.js"></script>

<script crossorigin="anonymous" async="async" integrity="sha512-UOw0TqDn8avzkxP/Bd5bcpsgtRCNBFr9cCcm7buH11ID1YXvwjNSn8ls+HjI2zTDwIUsu503YG5QUcpGcVXvLw==" type="application/javascript" src="https://github.githubassets.com/assets/github-bootstrap-1ad7a9c6.js"></script>

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

readme.md

readme.md

Learn Git and GitHub without any code!

文章导读

本文关联的代码

说明

Markdown text goes in here

Chapter 1

Chapter 2

为什么要修改作者的代码库

使用方式

案例1

案例2

案例3

Files

readme.md

Latest commit

History

readme.md

File metadata and controls

Learn Git and GitHub without any code!

文章导读

本文关联的代码

说明

Markdown text goes in here

Chapter 1

Chapter 2

为什么要修改作者的代码库

使用方式

案例1

案例2

案例3