不用百度了!简书中如何添加代码框?

作者: 陈恕之 | 来源:发表于2016-09-03 23:11 被阅读1263次
    问:作为一个一直用富文本写简书的大学生,当我想用简书写写代码的时候。怎么办?

    我必须去找度娘。问出来的结果是这样子的,大约有17100个结果。按理说,我应该选择第一条就可以知道答案了。可是,不好意思,度娘如此的不给力,我整整琢磨了两个小时才弄懂了这个代码框的道理。

    Paste_Image.png
    问:为什么会这样子?

    因为百度的答案有三个问题:1,杂 2,混乱 3,错误。
    总而言之,我实在是搜的一团晕,即使简书上也有人看完简书作者的问答而云里雾里的。

    Paste_Image.png

    后来在简叔等人的回答下,慢慢摸索出来了。(大家可以去知乎也关注下简叔啦~)

    ![V}J(]_JTRX}O17}0P@7HP.png](https://img.haomeiwen.com/i2657276/af6ac4ee80cda074.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

    问:那对于富文本小白该怎么导入代码框?

    答:按步骤来。
    准备条件:设置->常用编辑器Markdown->扩展预览

    Paste_Image.png

    第一种方法:用三个```(反单引号)来做头尾。

    以我的python语言的猜数程序为例。markdown会以一些常见的while,if,int,print等代码直接做高亮显示。后面加上语言,就会标注更加全面,如第一行反单引号后面多了一个python中特有的import和elif。
    PS:反单引号是在英文模式下的Tab键上方的~键 连续按三下。

    import random
    n = random.randint(1, 99)
    guess = int(raw_input("Enter an integer from 1 to 99: "))
    while n != "guess":
      print
      if guess < n:
        print "guess is low"
        guess = int(raw_input("Enter an integer from 1 to 99: "))
      elif guess > n:
        print "guess is high"
        guess = int(raw_input("Enter an integer from 1 to 99: "))
      else:
        print "you guessed it!"
        break
      print
    

    上面的代码实现如下图。


    Paste_Image.png
    import random
    n = random.randint(1, 99)
    guess = int(raw_input("Enter an integer from 1 to 99: "))
    while n != "guess":
      print
      if guess < n:
        print "guess is low"
        guess = int(raw_input("Enter an integer from 1 to 99: "))
      elif guess > n:
        print "guess is high"
        guess = int(raw_input("Enter an integer from 1 to 99: "))
      else:
        print "you guessed it!"
        break
      print
    

    加上语言的代码对比图如下(```python开头):


    Paste_Image.png

    如果嫌框架太大,那么下面这幅图就更直接的领会吧。语言和中间代码看你采用的是什么,自己去感兴趣就好。

    Paste_Image.png

    第二种方法:用类代码的方式书写。

    这个就有点酷了,可以让你的代码出现下拉的条,那么代码小牛就会觉得你是个代码大牛,因为你的代码需要左左右右移动才能完整看完。哈哈哈哈,开个玩笑,咱们切入正题吧。

    样例1

    <pre>
    这是一个装逼的地方。
    A place to BB.
    A place to BB.
    </pre>
    哈哈,很神奇吧。你单单想从我这里复制上一行是做不到的。

    那么,我是怎么做的呢?

    Paste_Image.png
    很简单啦,就是按上面这样写的。<pre>中间写字</pre>。是不是很神奇?

    样例2

    <pre>
    import random
    n = random.randint(1, 99)
    guess = int(raw_input("Enter an integer from 1 to 99: "))
    while n != "guess":
    </pre>

    Paste_Image.png

    样例3

    <code>
    import random
    n = random.randint(1, 99)
    guess = int(raw_input("Enter an integer from 1 to 99: "))
    while n != "guess":
    </code>

    Paste_Image.png

    样例4

    <pre><code>
    import random
    n = random.randint(1, 99)
    guess = int(raw_input("Enter an integer from 1 to 99: "))
    while n != "guess":
    </code>
    </pre>

    Paste_Image.png

    电脑端如下图:

    Paste_Image.png

    样例5

    <code><pre>
    import random

    n = random.randint(1, 99)

    guess = int(raw_input("Enter an integer from 1 to 99: "))

    while n != "guess":

    </pre></code>

    Paste_Image.png
    图五每行多一个回车键。<code><pre>都可以互换次序哦,不信你试试。

    学会了吗?

    PS:Markdown本身就是一个类HTML的语言,大家如果感兴趣可以去慕课网接触下HTML语言。
    http://www.imooc.com/learn/9
    也要去参考这个Markdown网页大全。
    http://wowubuntu.com/markdown/#code

    相关文章

      网友评论

        本文标题:不用百度了!简书中如何添加代码框?

        本文链接:https://www.haomeiwen.com/subject/yhmkettx.html