Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <section class="container">
  <header><h1>论语</h1></header>
  <div class="inner" is="pin-container" class="inner">
    <nav class="nav">
      <Pin>
        <ul>
          <li><a href="#学而篇">学而篇</a></li>
          <li><a href="#为政篇">为政篇</a></li>
          <li><a href="#里仁篇">里仁篇</a></li>
        </ul>
      </Pin>
    </nav>
    <div class="main">
      <h2 id="学而篇">学而篇</h2>
      <div>
<p>子曰:“学而时习之,不亦说乎?有朋自远方来,不亦乐乎?人不知而不愠,不亦君子乎?”</p>
<p>有子曰:“其为人也孝弟,而好犯上者,鲜矣;不好犯上而好作乱者,未之有也。君子务本,本立而道生。孝弟也者,其为仁之本与!”</p>
<p>子曰:“巧言令色,鲜矣仁!”</p>
<p>曾子曰:“吾日三省吾身:为人谋而不忠乎?与朋友交而不信乎?传不习乎?”</p>
<p>子曰:“道千乘之国,敬事而信,节用而爱人,使民以时。”</p>
<p>子曰:“弟子入则孝,出则弟,谨而信,泛爱众,而亲仁,行有余力,则以学文。”</p>
<p>子夏曰:“贤贤易色;事父母,能竭其力;事君,能致其身;与朋友交,言而有信。虽曰未学,吾必谓之学矣。”</p>
<p>子曰:“君子不重则不威,学则不固。主忠信,无友不如己者,过,则勿惮改。”</p>
<p>曾子曰:“慎终追远,民德归厚矣。”</p>
<p>子禽问于子贡曰:“夫子至于是邦也,必闻其政,求之与,抑与之与?”子贡曰:“夫子温、良、恭、俭、让以得之。夫子之求之也,其诸异乎人之求之与?”</p>
<p>子曰:“父在,观其志;父没,观其行;三年无改于父之道,可谓孝矣。”</p>
<p>有子曰:“礼之用,和为贵。先王之道,斯为美,小大由之。有所不行,知和而和,不以礼节之,亦不可行也。”</p>
<p>有子曰:“信近于义,言可复也。恭近于礼,远耻辱也。因不失其亲,亦可宗也。”</p>
<p>子曰:“君子食无求饱,居无求安,敏于事而慎于言,就有道而正焉。可谓好学也已。”</p>
<p>子贡曰:“贫而无谄,富而无骄,何如?”子曰:“可也。未若贫而乐道,富而好礼者也。”子贡曰:“《诗》云:‘如切如磋,如琢如磨’,其斯之谓与?”子曰:“赐也,始可与言《诗》已矣,告诸往而知来者。”</p>
<p>子曰:“不患人之不己知,患不知人也。”</p>
</div>
<h2 id="为政篇">为政篇</h2>
<div>
<p>子曰:“为政以德,譬如北辰,居其所而众星共之。”</p>
<p>子曰:“《诗》三百,一言以蔽之,曰:‘思无邪’。”</p>
<p>子曰:“道之以政,齐之以刑,民免而无耻。道之以德,齐之以礼,有耻且格。”</p>
<p>子曰:“吾十有五而志于学,三十而立,四十而不惑,五十而知天命,六十而耳顺,七十而从心所欲,不逾矩。”</p>
<p>孟懿子问孝,子曰:“无违。”樊迟御,子告之曰:“孟孙问孝于我,我对曰‘无违’。”樊迟曰:“何谓也?”子曰:“生,事之以礼;死,葬之以礼,祭之以礼。”</p>
<p>孟武伯问孝。子曰:“父母唯其疾之忧。”</p>
<p>子游问孝。子曰:“今之孝者,是谓能养。至于犬马皆能有养;不敬,何以别乎?”</p>
<p>子夏问孝。子曰:“色难。有事,弟子服其劳;有酒食,先生馔,曾是以为孝乎?”</p>
<p>子曰:“吾与回言终日,不违,如愚。退而省其私,亦足以发,回也不愚。”</p>
<p>子曰:“视其所以,观其所由,察其所安,人焉廋哉?人焉廋哉?”</p>
<p>子曰:“温故而知新,可以为师矣。”</p>
<p>子曰:“君子不器。”</p>
<p>子贡问君子。子曰:“先行其言而后从之。”</p>
<p>子曰:“君子周而不比,小人比而不周。”</p>
<p>子曰:“学而不思则罔,思而不学则殆。”</p>
<p>子曰:“攻乎异端,斯害也已!”</p>
<p>子曰:“由,诲汝知之乎!知之为知之,不知为不知,是知也。”</p>
<p>子张学干禄。子曰:“多闻阙疑,慎言其余,则寡尤;多见阙殆,慎行其余,则寡悔。言寡尤,行寡悔,禄在其中矣。”</p>
<p>哀公问曰:“何为则民服?”孔子对曰:“举直错诸枉,则民服;举枉错诸直,则民不服。”</p>
<p>季康子问:“使民敬、忠以劝,如之何?”子曰:“临之以庄,则敬;孝慈,则忠;举善而教不能,则劝。”</p>
<p>或谓孔子曰:“子奚不为政?”子曰:“《书》云:‘孝乎惟孝,友于兄弟,施于有政。’是亦为政,奚其为为政?”</p>
<p>子曰:“人而无信,不知其可也。大车无輗,小车无軏,其何以行之哉?”</p>
<p>子张问:“十世可知也?”子曰:“殷因于夏礼,所损益,可知也;周因于殷礼,所损益,可知也。其或继周者,虽百世,可知也。”</p>
<p>子曰:“非其鬼而祭之,谄也;见义不为,无勇也。”</p>
</div>

<h2 id="里仁篇">里仁篇</h2>
<div class="contson">
<p>子曰:“里仁为美。择不处仁,焉得知?”</p>
<p>子曰:“不仁者不可以久处约,不可以长处乐。仁者安仁,知者利仁。”</p>
<p>子曰:“唯仁者能好人,能恶人。”</p>
<p>子曰:“苟志于仁矣,无恶也。”</p>
<p>子曰:“富与贵,是人之所欲也;不以其道得之,不处也。贫与贱,是人之所恶也;不以其道得之,不去也。君子去仁,恶乎成名?君子无终食之间违仁,造次必于是,颠沛必于是。”</p>
<p>子曰:“我未见好仁者,恶不仁者。好仁者,无以尚之;恶不仁者,其为仁矣,不使不仁者加乎其身。有能一日用其力于仁矣乎?我未见力不足者。盖有之矣,我未之见也。”</p>
<p>子曰:“人之过也,各于其党。观过,斯知仁矣。”</p>
<p>子曰:“朝闻道,夕死可矣。”</p>
<p>子曰:“士志于道,而耻恶衣恶食者,未足与议也。”</p>
<p>子曰:“君子之于天下也,无适也,无莫也,义之与比。”</p>
<p>子曰:“君子怀德,小人怀土;君子怀刑,小人怀惠。”</p>
<p>子曰:“放于利而行,多怨。”</p>
<p>子曰:“能以礼让为国乎?何有?不能以礼让为国,如礼何?”</p>
<p>子曰:“不患无位,患所以立;不患莫己知,求为可知也。”</p>
<p>子曰:“参乎!吾道一以贯之。”曾子曰:“唯。”子出,门人问曰:“何谓也?”曾子曰:“夫子之道,忠恕而已矣。”</p>
<p>子曰:“君子喻于义,小人喻于利。”</p>
<p>子曰:“见贤思齐焉,见不贤而内自省也。”</p>
<p>子曰:“事父母几谏,见志不从,又敬不违,劳而不怨。”</p>
<p>子曰:“父母在,不远游,游必有方。”</p>
<p>子曰:“三年无改于父之道,可谓孝矣。”</p>
<p>子曰:“父母之年,不可不知也。一则以喜,一则以惧。”</p>
<p>子曰:“古者言之不出,耻躬之不逮也。”</p>
<p>子曰:“以约失之者鲜矣。”</p>
<p>子曰:“君子欲讷于言而敏于行。”</p>
<p>子曰:”德不孤,必有邻。“</p>
<p>子游曰:“事君数,斯辱矣;朋友数,斯疏矣。”</p>
</div>
            </div>
        </div>
    </section>
              
            
!

CSS

              
                html,body{
  margin: 0;
  padding: 0;
  font-size: 14px;
}

.container{
  > header h1{
    background-color: #ddd;
    margin: 0;
    padding: 1.25em 1em;
  }
}
.inner{
  display: flex;
  flex-wrap: nowrap;
  > .nav{
    width: 120px;
    flex-shrink: 0;
    ul,li{ list-style:none; margin:0; padding: 0; }
    ul{ background-color: #f5f5f5; padding: 10px 15px; }
    li{ padding: 5px 7px; }
  }
  > .main{
    padding-left: 20px;
    padding-right: 20px;
  }
}

              
            
!

JS

              
                (()=>new Vue({
    data: {
    },
  components: {
    PinContainer: vpin.PinContainer,
    Pin: vpin.Pin
  }
}).$mount(".container"))({})
              
            
!
999px

Console