Qiita / Qiita:Team における Markdown レンダリングの歴史

by Yuji Nakayama

Slide 1

Slide 1 text

2JJUB2JJUB5FBNʹ͓͚Δ .BSLEPXOϨϯμϦϯάͷྺ࢙ Yuji Nakayama @nkym37 @yujinakayama

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

࠷ॳ͸Q&AαʔϏεͩͬͨ

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

࠷ॳ͸ MarkdownະରԠͩͬͨ

Slide 10

Slide 10 text

ࠓ೔࿩͢͜ͱ .BSLEPXOυΩϡϝϯτΛϗετ͢Δ8FCαʔϏεΛӡ Ӧ͢Δ্Ͱ௚໘͖ͯͨ͠ɺ.BSLEPXOϨϯμϥʔपΓͷ టष͍ࣄ৘

Slide 11

Slide 11 text

2JJUBͷॳظͷ.BSLEPXOαϙʔτ ೥݄ 2JJUBϦϦʔεͷϲ݄ޙ

Slide 12

Slide 12 text

ॳظͷ2JJUBͷ.BSLEPXOϨϯμϥʔ w ࣮૷͸SFEDBSQFUΧελϜϨϯμϥʔ w SFEDBSQFU͸$Ͱॻ͔Εͨ.BSLEPXOύʔαʔͷSVCZHFN w ౰࣌ͷ(JU)VC'MBWPSFE.BSLEPXOͷ࣮૷͸SFEDBSQFUͷ ϕʔεͰ͋ΔTVOEPXOΛϕʔεʹ͍ͯͨ͠ʢͱࢥΘΕΔʣ w ·ͩ$PNNPO.BSL͸ͳ͔ͬͨ

Slide 13

Slide 13 text

class Qiita::Markdown::Renderer < Redcarpet::Render::HTML # ... end renderer = Qiita::Markdown::Renderer( filter_html: true, hard_wrap: true ) parser = Redcarpet::Markdown.new( renderer, autolink: true, fenced_code_blocks: true ) html = parser.render(markdown)

Slide 14

Slide 14 text

ॳظͷ࢓༷ w ࢓༷తʹ͸(JU)VC'MBWPSFE.BSLEPXOʹد͍ͤͯͨ w BVUPMJOL63-ͬΆ͍จࣈྻΛࣗಈͰϦϯΫʹ w GFODFE@DPEF@CMPDLT```\nsome code\n``` w [email protected]ͷվߦͰ
ग़ྗ w ΧελϜϨϯμϥʔͰγϯλοΫεϋΠϥΠτ w ͷͪʹଧͪফ͠ઢ΍ςʔϒϧه๏ʹ΋ରԠ

Slide 15

Slide 15 text

ϝϯγϣϯه๏ͷಋೖ ೥݄ @username

Slide 16

Slide 16 text

2JJUB5FBNϦϦʔε ೥݄ αχλΠζͷϧʔϧ͕2JJUBͱएׯҟͳΔ

Slide 17

Slide 17 text

ֆจࣈͷαϙʔτ ೥݄ :tada:

Slide 18

Slide 18 text

qiita-markdown gem ೥݄

Slide 19

Slide 19 text

qiita-markdown gem w IUNMQJQFMJOFSFEDBSQFUOPLPHJSJ w IUNMQJQFMJOF͸)5.-ॲཧͷ3VCZϑϨʔϜϫʔΫ w ίΞϨϯμϥʔͱͯ͠SFEDBSQFUΛ࢖͍ɺͦͷग़ྗʹର͠ ͯෳ਺ͷϑΟϧλʔʹΑΔޙॲཧΛద༻ w 044Խ

Slide 20

Slide 20 text

Redcarpet filter Emoji filter Syntax highlight filter Mention filter Markdown string HTML tree HTML tree HTML tree HTML tree HTML tree HTML tree HTML tree

Slide 21

Slide 21 text

IUNMQJQFMJOFͷԿ͕خ͍͔͠ w ੹຿͝ͱʹϑΟϧλʔΛ෼͚ΒΕΔͷͰɺίʔυͷݟ௨͕͠ྑ͘ͳΔ w ϑΟϧλʔͷద༻ॱং͕໌֬ w جຊσʔλߏ଄ͱͯ͠OPLPHJSJͷ)5.-USFFΛ࠾༻͍ͯ͠ΔͨΊ )5.-ͷૢ࡞͕ݎ࿚ w ҎલͷϨϯμϥʔͰ͸Ұ෦ਖ਼نදݱΛ࢖͍ͬͯΔՕॴ͕͋ͬͨ

Slide 22

Slide 22 text

ϢʔβʔͷաڈͷίϝϯτҰཡ ೥݄

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

ίϝϯτҰཡΛදࣔ͢Δ w هࣄҰཡͳΒλΠτϧΛදࣔ͢Ε͹ྑ͍͕ɺίϝϯτʹ͸ λΠτϧ͕ͳ͍ͷͰɺຊจͷཁ໿Λදࣔ͢Δඞཁ͕͋Δ w ௕͗͢ΔίϝϯτશจΛදࣔͨ͘͠͸ͳ͍ w ཁ໿ͱͯ͠දࣔ͢Δͷ͕೉͍͠ɺෳࡶͳϚʔΫΞοϓΛऔ Γআ͖͍ͨ

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

Qiita::Markdown::SummaryProcessor w ϒϩοΫཁૉͷத਎͸࢒ͭͭ͠λάΛ࡟আ͢Δ͜ͱͰɺΠϯϥΠϯԽ •

foobar

ˠfoobar w ςʔϒϧͷΑ͏ͳɺΠϯϥΠϯԽͯ͠΋ෳࡶ͗ͯ͢ҙຯΛͳ͞ͳ͍ཁ ૉ͸த਎͝ͱ࡟আ w )5.-ͷυΩϡϝϯτߏ଄Λߟྀͭͭ͠USVODBUF

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

ϝϯγϣϯͰ͖ͳ͍Ϣʔβʔ໰୊ ೥݄

Slide 30

Slide 30 text

ϝϯγϣϯͰ͖ͳ͍ਓ͕͍ΔΜͰ͕͢ʜ

Slide 31

Slide 31 text

@qiitan Markdown HTML @qiitan @gfx @__gfx__ Hi @foo _Hi @foo_

Slide 32

Slide 32 text

w__foo__Λfooʹม׵͢Δॲཧ͸ SFEDBSQFU͕΍͍ͬͯΔ w@fooΛ@fooʹม׵͢Δॲཧ͸ɺ SFEDBSQFUΑΓޙ޻ఔͷ.FOUJPOϑΟϧλʔ͕΍͍ͬͯΔ wͭ·Γ.FOUJPOϑΟϧλʔͷೖྗͷ࣌఺Ͱɺ@__gfx__͸ @gfxʹͳͬͯ͠·͍ͬͯΔ

Slide 33

Slide 33 text

Redcarpet ﬁlter Mention ﬁlter @__gfx__ @gfx @gfx ͳΜ͔λά͍ͭͯΔ͠ ͜Ε͸ϝϯγϣϯ͡Όͳ͍ͳ ͳΜ͔ઌ಄ʹ@͍ͭͯΔ͚Ͳ ڧௐه๏ʹϚον͢Δ͔Βڧௐ͠ͱ͜

Slide 34

Slide 34 text

w ࠜຊతʹ͜ͷ໰୊ʹରॲ͢Δʹ͸ɺSFEDBSQFUʹखΛՃ͑ͯϝϯγϣϯه๏ ͷ஌ࣝΛ༩͑ΔʢϝϯγϣϯͷҰ෦ͩͬͨΒڧௐ͠ͳ͍ʣඞཁ͕͋Δ w ͔͠͠SFEDBSQFUͷGPSL͸࠷ऴखஈͰ͋ΓɺͰ͖Ε͹΍Γͨ͘ͳ͍ w ϫʔΫΞϥ΢ϯυͱͯ͠ɺ.FOUJPOϑΟϧλʔʹ@gfx strong>͕౉͞ΕͨΒɺ@__gfx__ʹ໭ͯ͠ϝϯγϣϯͱͯ͠ѻ͑͹ྑ͍ʁ w ڧௐه๏͸_͚ͩͰͳ͘*΋࢖͑ΔͷͰ@gfxͷݩ ͷ.BSLEPXOιʔε͕ɺ@**gfx**ͩͬͨՄೳੑ΋͋Δ

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

(JU)VC͸͜ͷ໰୊ʹ Ͳ͏ରॲ͍ͯ͠Δͷ͔

Slide 37

Slide 37 text

No content

Slide 38

Slide 38 text

No content

Slide 39

Slide 39 text

.BSLEPXOͰϝϯγϣϯͰ͖ΔαʔϏεΛ࡞ΔͳΒɺ Ϣʔβʔ໊ʹ͸_Λ࢖͑ͳ͍Α͏ʹͨ͠ํ͕ྑ͍ গͳ͘ͱ΋ઌ಄ͱ຤ඌͷ_͸ආ͚͍ͨ

Slide 40

Slide 40 text

ݹ͍Ωϟογϡ໰୊ ೥݄

Slide 41

Slide 41 text

.BSLEPXOϨϯμϦϯάͷύϑΥʔϚϯε w 8FCαʔϏεͱͯ͠ɺϢʔβʔʹͱͬͯշదͳϨεϙϯελΠ ϜΛୡ੒͢Δͱ͍͏จ຺Ͱ͸ɺ.BSLEPXO RJJUBNBSLEPXO ͷ ϨϯμϦϯά͸ॏ͍ w ຊจͷ಺༰΍௕͞ʹΑͬͯॲཧ͕࣌ؒେ͖͘มΘΔ w ڊେͳςʔϒϧΛؚΜͩهࣄ͸ɺϨϯμϦϯάʹඵ͔͔ۙ͘ Δ͜ͱ΋͋Δ

Slide 42

Slide 42 text

ϨϯμϦϯά݁ՌΛΩϟογϡ͢Δ w ౤ߘ࣌ʹҰ౓͚ͩϨϯμϦϯάͯ͠ɺ݁ՌΛΩϟογϡ ͓ͯ͘͠ w هࣄϖʔδӾཡϦΫΤετʹରͯ͠ຖճϨϯμϦϯά͸ ͠ͳ͍

Slide 43

Slide 43 text

ݹ͍Ωϟογϡ໰୊ w RJJUBNBSLEPXO͸೔ʑਐԽ͍ͯ͠ΔͨΊɺ౤ߘ࣌ʹΩϟο γϡ͞ΕͨϨϯμϦϯά݁Ռͱɺ࠷৽ͷϨϯμϥʔͰϨϯ μϦϯάͨ͠৔߹ͷ݁Ռʹဃ཭͕ͰΔ w ࠣࡉͳมߋͰ͋Ε͹ݹ͍ΩϟογϡΛࢀর͠ଓ͚ͯ΋ྑ͍ ͕ɺ944ͳͲͷ੬ऑੑରԠͷ৔߹͸৽͍͠ϨϯμϥʔͰ֬ ࣮ʹϨϯμϦϯά͠௚͍ͨ͠

Slide 44

Slide 44 text

࠶ϨϯμϦϯάػߏ w *ODSFNFOUBMͳSFOEFSFSWFSTJPO *OUFHFS Λఆٛ͢Δ w ϨϯμϦϯά݁ՌͷΩϟογϡʹɺͦͷ࣌఺ͰͷSFOEFSFSWFSTJPOΛҰॹʹ֨ೲ͓ͯ͘͠ w هࣄΫϥεͷϨϯμϦϯά݁ՌΛฦ͢ϝιου಺ͰɺΩϟογϡͷSFOEFSFSWFSTJPO͕ݱ ࡏͷWFSTJPOΑΓ΋ݹ͍৔߹͸ࣗಈతʹ࠶ϨϯμϦϯάΛ࣮ߦ͢Δ w ࣮ࡍʹ͸શϦΫΤετͰ࠶ϨϯμϦϯά͕૸Δͱෛՙͷ໰୊͕͋ΔͷͰɺ֬཰తʹ࣮ ߦ͞ΕΔΑ͏ʹ͠ɺ࣌ؒͱڞʹ཰Λঃʑʹ্͍͛ͯ͘ w RJJUBNBSLEPXOʹखΛՃ͑ͨ৔߹΍ɺԿΒ͔ͷཧ༝Ͱશهࣄͷ࠶ϨϯμϦϯάΛ࣮ߦ͠ ͍ͨ৔߹͸SFOEFSFSWFSTJPOΛ͢Δ

Slide 45

Slide 45 text

class Article < ActiveRecord::Base CURRENT_RENDERER_VERSION = 3 def rendered_body if cached_body_renderer_version < CURRENT_RENDERER_VERSION self.cached_body = render(markdown_body) self.cached_body_renderer_version = CURRENT_RENDERER_VERSION end cached_body end end

Slide 46

Slide 46 text

೥݄

Slide 47

Slide 47 text

No content

Slide 48

Slide 48 text

No content

Slide 49

Slide 49 text

No content

Slide 50

Slide 50 text

No content

Slide 51

Slide 51 text

.BSLEPXO͸௚઀)5.-λάΛೖྗͰ͖Δ ໌Β͔ʹةݥͳλά΍ଐੑ͸αχλΠζ͍͕ͯͨ͠ɺ DMBTTଐੑ͸ڐՄ͍ͯͨ͠ ·ΘΔίϝϯτ

Slide 52

Slide 52 text

No content

Slide 53

Slide 53 text

ΑΓݫ֨ͳαχλΠζ w 2JJUBͷ6*ʹ࢖ΘΕ͍ͯΔDMBTTΛࢦఆ͢Δ͜ͱͰɺ2JJUBΛ໛฿ͨ͠ϑΟογϯάϖʔδΛ࡞ ੒Ͱ͖ͯ͠·͏ w FH2JJUBͷϩάΠϯϖʔδΛ໛฿ͨ͠ϑΥʔϜΛ࡞Γɺ֎෦αΠτ΁ύεϫʔυΛૹ৴͢Δ w ͜Ε·Ͱ΋αχλΠζ͸͍͕ͯͨ͠ɺϗϫΠτϦετϧʔϧΛΑΓݫ֨ʹ͠ɺར༻Ͱ͖Δ )5.-ཁૉ΍ଐੑΛݶఆతʹͨ͠ w HSFFONBU SFEDBSQFU ʹ͓͍ͯɺதؒϝλσʔλΛDMBTTଐੑͱͯ͠ग़ྗ͍ͯ͠ΔՕॴ͕͋ͬ ͨͷͰɺผͷEBUBଐੑʹग़ྗ͢ΔΑ͏ʹมߋ͠ɺϢʔβʔʹΑΔೖྗͱ۠ผͰ͖ΔΑ͏ ʹͨ͠

Slide 54

Slide 54 text

͜Ε͔Β

Slide 55

Slide 55 text

$PNNPO.BSL͸ʁ w ௕ظతʹ͸Ҡߦ͍ͨ͠ʢݸਓͷײ૝ʣ͕ɺطଘͷهࣄσʔ λͷҠߦ͕େมͦ͏ w (JU)VC͸$PNNPO.BSL΁ͷҠߦ࣌ɺ৽چͷϨϯμϥʔͰ ղऍ͕ҟͳΔυΩϡϝϯτ͸ม׵ॲஔΛߦͳͬͨ w IUUQTHJUIVCFOHJOFFSJOHDPNBGPSNBMTQFDGPS HJUIVCNBSLEPXO

Slide 56

Slide 56 text

Thank you