[{"data":1,"prerenderedAt":868},["Reactive",2],{"content-query-08zHJMqJmX":3},{"_path":4,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"_empty":6,"title":8,"description":9,"body":10,"_type":863,"_id":864,"_source":865,"_file":866,"_extension":867},"/docs/ui/code","ui",false,"","Code - Inkline","Examples for displaying inline and multi-line blocks of code.",{"type":11,"children":12,"toc":854},"root",[13,22,28,35,49,182,188,207,402,408,420,540,546,558,753,759,770,849],{"type":14,"tag":15,"props":16,"children":18},"element","h1",{"id":17},"code",[19],{"type":20,"value":21},"text","Code",{"type":14,"tag":23,"props":24,"children":26},"h2",{"id":25},"examples-for-displaying-inline-and-multi-line-blocks-of-code",[27],{"type":20,"value":9},{"type":14,"tag":29,"props":30,"children":32},"h3",{"id":31},"inline",[33],{"type":20,"value":34},"Inline",{"type":14,"tag":36,"props":37,"children":38},"p",{},[39,41,47],{"type":20,"value":40},"Wrap inline snippets of code with ",{"type":14,"tag":42,"props":43,"children":44},"code-inline",{},[45],{"type":20,"value":46},"\u003Ccode>",{"type":20,"value":48},". Be sure to escape HTML angle brackets.",{"type":14,"tag":50,"props":51,"children":52},"content-tabs",{},[53,62],{"type":14,"tag":54,"props":55,"children":56},"template",{"v-slot:preview":7},[57],{"type":14,"tag":58,"props":59,"children":61},"content-preview",{"src":60},"/stories/core/code/inline",[],{"type":14,"tag":54,"props":63,"children":64},{"v-slot:vue":7},[65],{"type":14,"tag":17,"props":66,"children":71},{"className":67,"code":69,"language":70,"meta":7},[68],"language-vue","\u003Ctemplate>\n    \u003Cp>For example, \u003Ccode><section>\u003C/code> should be wrapped as inline.\u003C/p>\n\u003C/template>\n\n","vue",[72],{"type":14,"tag":73,"props":74,"children":75},"pre",{},[76],{"type":14,"tag":17,"props":77,"children":78},{"__ignoreMap":7},[79,101,166],{"type":14,"tag":80,"props":81,"children":84},"span",{"class":82,"line":83},"line",1,[85,91,96],{"type":14,"tag":80,"props":86,"children":88},{"class":87},"ct-553616",[89],{"type":20,"value":90},"\u003C",{"type":14,"tag":80,"props":92,"children":94},{"class":93},"ct-914029",[95],{"type":20,"value":54},{"type":14,"tag":80,"props":97,"children":98},{"class":87},[99],{"type":20,"value":100},">\n",{"type":14,"tag":80,"props":102,"children":104},{"class":82,"line":103},2,[105,110,114,119,123,128,134,139,144,149,153,158,162],{"type":14,"tag":80,"props":106,"children":107},{"class":87},[108],{"type":20,"value":109},"    \u003C",{"type":14,"tag":80,"props":111,"children":112},{"class":93},[113],{"type":20,"value":36},{"type":14,"tag":80,"props":115,"children":116},{"class":87},[117],{"type":20,"value":118},">For example, \u003C",{"type":14,"tag":80,"props":120,"children":121},{"class":93},[122],{"type":20,"value":17},{"type":14,"tag":80,"props":124,"children":125},{"class":87},[126],{"type":20,"value":127},">",{"type":14,"tag":80,"props":129,"children":131},{"class":130},"ct-617022",[132],{"type":20,"value":133},"<",{"type":14,"tag":80,"props":135,"children":136},{"class":87},[137],{"type":20,"value":138},"section",{"type":14,"tag":80,"props":140,"children":141},{"class":130},[142],{"type":20,"value":143},">",{"type":14,"tag":80,"props":145,"children":146},{"class":87},[147],{"type":20,"value":148},"\u003C/",{"type":14,"tag":80,"props":150,"children":151},{"class":93},[152],{"type":20,"value":17},{"type":14,"tag":80,"props":154,"children":155},{"class":87},[156],{"type":20,"value":157},"> should be wrapped as inline.\u003C/",{"type":14,"tag":80,"props":159,"children":160},{"class":93},[161],{"type":20,"value":36},{"type":14,"tag":80,"props":163,"children":164},{"class":87},[165],{"type":20,"value":100},{"type":14,"tag":80,"props":167,"children":169},{"class":82,"line":168},3,[170,174,178],{"type":14,"tag":80,"props":171,"children":172},{"class":87},[173],{"type":20,"value":148},{"type":14,"tag":80,"props":175,"children":176},{"class":93},[177],{"type":20,"value":54},{"type":14,"tag":80,"props":179,"children":180},{"class":87},[181],{"type":20,"value":127},{"type":14,"tag":29,"props":183,"children":185},{"id":184},"block",[186],{"type":20,"value":187},"Block",{"type":14,"tag":36,"props":189,"children":190},{},[191,193,198,200,205],{"type":20,"value":192},"We use ",{"type":14,"tag":42,"props":194,"children":195},{},[196],{"type":20,"value":197},"\u003Cpre>",{"type":20,"value":199}," for multiple lines of code. Once again, be sure to escape any angle brackets in the code for proper\nrendering. You may optionally add the ",{"type":14,"tag":42,"props":201,"children":202},{},[203],{"type":20,"value":204},".-scrollable",{"type":20,"value":206}," modifier, which will set a max-height and provide a y-axis scrollbar.",{"type":14,"tag":50,"props":208,"children":209},{},[210,217],{"type":14,"tag":54,"props":211,"children":212},{"v-slot:preview":7},[213],{"type":14,"tag":58,"props":214,"children":216},{"src":215},"/stories/core/code/block",[],{"type":14,"tag":54,"props":218,"children":219},{"v-slot:vue":7},[220],{"type":14,"tag":17,"props":221,"children":224},{"className":222,"code":223,"language":70,"meta":7},[68],"\u003Ctemplate>\n    \u003Cpre>\n    \u003Ccode>\n    <p>Sample text here...</p>\n    <p>And another line of sample text here...</p>\n    \u003C/code>\n    \u003C/pre>\n\u003C/template>\n\n",[225],{"type":14,"tag":73,"props":226,"children":227},{},[228],{"type":14,"tag":17,"props":229,"children":230},{"__ignoreMap":7},[231,246,261,276,316,353,370,386],{"type":14,"tag":80,"props":232,"children":233},{"class":82,"line":83},[234,238,242],{"type":14,"tag":80,"props":235,"children":236},{"class":87},[237],{"type":20,"value":90},{"type":14,"tag":80,"props":239,"children":240},{"class":93},[241],{"type":20,"value":54},{"type":14,"tag":80,"props":243,"children":244},{"class":87},[245],{"type":20,"value":100},{"type":14,"tag":80,"props":247,"children":248},{"class":82,"line":103},[249,253,257],{"type":14,"tag":80,"props":250,"children":251},{"class":87},[252],{"type":20,"value":109},{"type":14,"tag":80,"props":254,"children":255},{"class":93},[256],{"type":20,"value":73},{"type":14,"tag":80,"props":258,"children":259},{"class":87},[260],{"type":20,"value":100},{"type":14,"tag":80,"props":262,"children":263},{"class":82,"line":168},[264,268,272],{"type":14,"tag":80,"props":265,"children":266},{"class":87},[267],{"type":20,"value":109},{"type":14,"tag":80,"props":269,"children":270},{"class":93},[271],{"type":20,"value":17},{"type":14,"tag":80,"props":273,"children":274},{"class":87},[275],{"type":20,"value":100},{"type":14,"tag":80,"props":277,"children":279},{"class":82,"line":278},4,[280,285,289,293,297,302,306,311],{"type":14,"tag":80,"props":281,"children":282},{"class":87},[283],{"type":20,"value":284},"    ",{"type":14,"tag":80,"props":286,"children":287},{"class":130},[288],{"type":20,"value":133},{"type":14,"tag":80,"props":290,"children":291},{"class":87},[292],{"type":20,"value":36},{"type":14,"tag":80,"props":294,"children":295},{"class":130},[296],{"type":20,"value":143},{"type":14,"tag":80,"props":298,"children":299},{"class":87},[300],{"type":20,"value":301},"Sample text here...",{"type":14,"tag":80,"props":303,"children":304},{"class":130},[305],{"type":20,"value":133},{"type":14,"tag":80,"props":307,"children":308},{"class":87},[309],{"type":20,"value":310},"/p",{"type":14,"tag":80,"props":312,"children":313},{"class":130},[314],{"type":20,"value":315},">\n",{"type":14,"tag":80,"props":317,"children":319},{"class":82,"line":318},5,[320,324,328,332,336,341,345,349],{"type":14,"tag":80,"props":321,"children":322},{"class":87},[323],{"type":20,"value":284},{"type":14,"tag":80,"props":325,"children":326},{"class":130},[327],{"type":20,"value":133},{"type":14,"tag":80,"props":329,"children":330},{"class":87},[331],{"type":20,"value":36},{"type":14,"tag":80,"props":333,"children":334},{"class":130},[335],{"type":20,"value":143},{"type":14,"tag":80,"props":337,"children":338},{"class":87},[339],{"type":20,"value":340},"And another line of sample text here...",{"type":14,"tag":80,"props":342,"children":343},{"class":130},[344],{"type":20,"value":133},{"type":14,"tag":80,"props":346,"children":347},{"class":87},[348],{"type":20,"value":310},{"type":14,"tag":80,"props":350,"children":351},{"class":130},[352],{"type":20,"value":315},{"type":14,"tag":80,"props":354,"children":356},{"class":82,"line":355},6,[357,362,366],{"type":14,"tag":80,"props":358,"children":359},{"class":87},[360],{"type":20,"value":361},"    \u003C/",{"type":14,"tag":80,"props":363,"children":364},{"class":93},[365],{"type":20,"value":17},{"type":14,"tag":80,"props":367,"children":368},{"class":87},[369],{"type":20,"value":100},{"type":14,"tag":80,"props":371,"children":373},{"class":82,"line":372},7,[374,378,382],{"type":14,"tag":80,"props":375,"children":376},{"class":87},[377],{"type":20,"value":361},{"type":14,"tag":80,"props":379,"children":380},{"class":93},[381],{"type":20,"value":73},{"type":14,"tag":80,"props":383,"children":384},{"class":87},[385],{"type":20,"value":100},{"type":14,"tag":80,"props":387,"children":389},{"class":82,"line":388},8,[390,394,398],{"type":14,"tag":80,"props":391,"children":392},{"class":87},[393],{"type":20,"value":148},{"type":14,"tag":80,"props":395,"children":396},{"class":93},[397],{"type":20,"value":54},{"type":14,"tag":80,"props":399,"children":400},{"class":87},[401],{"type":20,"value":127},{"type":14,"tag":29,"props":403,"children":405},{"id":404},"variables",[406],{"type":20,"value":407},"Variables",{"type":14,"tag":36,"props":409,"children":410},{},[411,413,418],{"type":20,"value":412},"For indicating variables use the HTML5 ",{"type":14,"tag":42,"props":414,"children":415},{},[416],{"type":20,"value":417},"\u003Cvar>",{"type":20,"value":419}," tag.",{"type":14,"tag":50,"props":421,"children":422},{},[423,430],{"type":14,"tag":54,"props":424,"children":425},{"v-slot:preview":7},[426],{"type":14,"tag":58,"props":427,"children":429},{"src":428},"/stories/core/code/variables",[],{"type":14,"tag":54,"props":431,"children":432},{"v-slot:vue":7},[433],{"type":14,"tag":17,"props":434,"children":437},{"className":435,"code":436,"language":70,"meta":7},[68],"\u003Ctemplate>\u003Cvar>y\u003C/var> = \u003Cvar>m\u003C/var>\u003Cvar>x\u003C/var> + \u003Cvar>b\u003C/var>\u003C/template>\n\n",[438],{"type":14,"tag":73,"props":439,"children":440},{},[441],{"type":14,"tag":17,"props":442,"children":443},{"__ignoreMap":7},[444],{"type":14,"tag":80,"props":445,"children":446},{"class":82,"line":83},[447,451,455,460,465,470,474,479,483,488,492,496,500,505,509,514,518,523,527,532,536],{"type":14,"tag":80,"props":448,"children":449},{"class":87},[450],{"type":20,"value":90},{"type":14,"tag":80,"props":452,"children":453},{"class":93},[454],{"type":20,"value":54},{"type":14,"tag":80,"props":456,"children":457},{"class":87},[458],{"type":20,"value":459},">\u003C",{"type":14,"tag":80,"props":461,"children":462},{"class":93},[463],{"type":20,"value":464},"var",{"type":14,"tag":80,"props":466,"children":467},{"class":87},[468],{"type":20,"value":469},">y\u003C/",{"type":14,"tag":80,"props":471,"children":472},{"class":93},[473],{"type":20,"value":464},{"type":14,"tag":80,"props":475,"children":476},{"class":87},[477],{"type":20,"value":478},"> = \u003C",{"type":14,"tag":80,"props":480,"children":481},{"class":93},[482],{"type":20,"value":464},{"type":14,"tag":80,"props":484,"children":485},{"class":87},[486],{"type":20,"value":487},">m\u003C/",{"type":14,"tag":80,"props":489,"children":490},{"class":93},[491],{"type":20,"value":464},{"type":14,"tag":80,"props":493,"children":494},{"class":87},[495],{"type":20,"value":459},{"type":14,"tag":80,"props":497,"children":498},{"class":93},[499],{"type":20,"value":464},{"type":14,"tag":80,"props":501,"children":502},{"class":87},[503],{"type":20,"value":504},">x\u003C/",{"type":14,"tag":80,"props":506,"children":507},{"class":93},[508],{"type":20,"value":464},{"type":14,"tag":80,"props":510,"children":511},{"class":87},[512],{"type":20,"value":513},"> + \u003C",{"type":14,"tag":80,"props":515,"children":516},{"class":93},[517],{"type":20,"value":464},{"type":14,"tag":80,"props":519,"children":520},{"class":87},[521],{"type":20,"value":522},">b\u003C/",{"type":14,"tag":80,"props":524,"children":525},{"class":93},[526],{"type":20,"value":464},{"type":14,"tag":80,"props":528,"children":529},{"class":87},[530],{"type":20,"value":531},">\u003C/",{"type":14,"tag":80,"props":533,"children":534},{"class":93},[535],{"type":20,"value":54},{"type":14,"tag":80,"props":537,"children":538},{"class":87},[539],{"type":20,"value":127},{"type":14,"tag":29,"props":541,"children":543},{"id":542},"user-input",[544],{"type":20,"value":545},"User Input",{"type":14,"tag":36,"props":547,"children":548},{},[549,551,556],{"type":20,"value":550},"You can use the ",{"type":14,"tag":42,"props":552,"children":553},{},[554],{"type":20,"value":555},"\u003Ckbd>",{"type":20,"value":557}," to indicate input that is typically entered via keyboard.",{"type":14,"tag":50,"props":559,"children":560},{},[561,568],{"type":14,"tag":54,"props":562,"children":563},{"v-slot:preview":7},[564],{"type":14,"tag":58,"props":565,"children":567},{"src":566},"/stories/core/code/user-input",[],{"type":14,"tag":54,"props":569,"children":570},{"v-slot:vue":7},[571],{"type":14,"tag":17,"props":572,"children":575},{"className":573,"code":574,"language":70,"meta":7},[68],"\u003Ctemplate>\n    \u003Cp>To switch directories, type \u003Ckbd>cd\u003C/kbd> followed by the name of the directory.\u003Cbr />\u003C/p>\n    \u003Cp>\n        To edit settings, press \u003Ckbd>\u003Ckbd>ctrl\u003C/kbd> + \u003Ckbd>,\u003C/kbd>\u003C/kbd>\n    \u003C/p>\n\u003C/template>\n\n",[576],{"type":14,"tag":73,"props":577,"children":578},{},[579],{"type":14,"tag":17,"props":580,"children":581},{"__ignoreMap":7},[582,597,650,665,723,738],{"type":14,"tag":80,"props":583,"children":584},{"class":82,"line":83},[585,589,593],{"type":14,"tag":80,"props":586,"children":587},{"class":87},[588],{"type":20,"value":90},{"type":14,"tag":80,"props":590,"children":591},{"class":93},[592],{"type":20,"value":54},{"type":14,"tag":80,"props":594,"children":595},{"class":87},[596],{"type":20,"value":100},{"type":14,"tag":80,"props":598,"children":599},{"class":82,"line":103},[600,604,608,613,618,623,627,632,637,642,646],{"type":14,"tag":80,"props":601,"children":602},{"class":87},[603],{"type":20,"value":109},{"type":14,"tag":80,"props":605,"children":606},{"class":93},[607],{"type":20,"value":36},{"type":14,"tag":80,"props":609,"children":610},{"class":87},[611],{"type":20,"value":612},">To switch directories, type \u003C",{"type":14,"tag":80,"props":614,"children":615},{"class":93},[616],{"type":20,"value":617},"kbd",{"type":14,"tag":80,"props":619,"children":620},{"class":87},[621],{"type":20,"value":622},">cd\u003C/",{"type":14,"tag":80,"props":624,"children":625},{"class":93},[626],{"type":20,"value":617},{"type":14,"tag":80,"props":628,"children":629},{"class":87},[630],{"type":20,"value":631},"> followed by the name of the directory.\u003C",{"type":14,"tag":80,"props":633,"children":634},{"class":93},[635],{"type":20,"value":636},"br",{"type":14,"tag":80,"props":638,"children":639},{"class":87},[640],{"type":20,"value":641}," />\u003C/",{"type":14,"tag":80,"props":643,"children":644},{"class":93},[645],{"type":20,"value":36},{"type":14,"tag":80,"props":647,"children":648},{"class":87},[649],{"type":20,"value":100},{"type":14,"tag":80,"props":651,"children":652},{"class":82,"line":168},[653,657,661],{"type":14,"tag":80,"props":654,"children":655},{"class":87},[656],{"type":20,"value":109},{"type":14,"tag":80,"props":658,"children":659},{"class":93},[660],{"type":20,"value":36},{"type":14,"tag":80,"props":662,"children":663},{"class":87},[664],{"type":20,"value":100},{"type":14,"tag":80,"props":666,"children":667},{"class":82,"line":278},[668,673,677,681,685,690,694,698,702,707,711,715,719],{"type":14,"tag":80,"props":669,"children":670},{"class":87},[671],{"type":20,"value":672},"        To edit settings, press \u003C",{"type":14,"tag":80,"props":674,"children":675},{"class":93},[676],{"type":20,"value":617},{"type":14,"tag":80,"props":678,"children":679},{"class":87},[680],{"type":20,"value":459},{"type":14,"tag":80,"props":682,"children":683},{"class":93},[684],{"type":20,"value":617},{"type":14,"tag":80,"props":686,"children":687},{"class":87},[688],{"type":20,"value":689},">ctrl\u003C/",{"type":14,"tag":80,"props":691,"children":692},{"class":93},[693],{"type":20,"value":617},{"type":14,"tag":80,"props":695,"children":696},{"class":87},[697],{"type":20,"value":513},{"type":14,"tag":80,"props":699,"children":700},{"class":93},[701],{"type":20,"value":617},{"type":14,"tag":80,"props":703,"children":704},{"class":87},[705],{"type":20,"value":706},">,\u003C/",{"type":14,"tag":80,"props":708,"children":709},{"class":93},[710],{"type":20,"value":617},{"type":14,"tag":80,"props":712,"children":713},{"class":87},[714],{"type":20,"value":531},{"type":14,"tag":80,"props":716,"children":717},{"class":93},[718],{"type":20,"value":617},{"type":14,"tag":80,"props":720,"children":721},{"class":87},[722],{"type":20,"value":100},{"type":14,"tag":80,"props":724,"children":725},{"class":82,"line":318},[726,730,734],{"type":14,"tag":80,"props":727,"children":728},{"class":87},[729],{"type":20,"value":361},{"type":14,"tag":80,"props":731,"children":732},{"class":93},[733],{"type":20,"value":36},{"type":14,"tag":80,"props":735,"children":736},{"class":87},[737],{"type":20,"value":100},{"type":14,"tag":80,"props":739,"children":740},{"class":82,"line":355},[741,745,749],{"type":14,"tag":80,"props":742,"children":743},{"class":87},[744],{"type":20,"value":148},{"type":14,"tag":80,"props":746,"children":747},{"class":93},[748],{"type":20,"value":54},{"type":14,"tag":80,"props":750,"children":751},{"class":87},[752],{"type":20,"value":127},{"type":14,"tag":29,"props":754,"children":756},{"id":755},"sample-output",[757],{"type":20,"value":758},"Sample Output",{"type":14,"tag":36,"props":760,"children":761},{},[762,763,768],{"type":20,"value":550},{"type":14,"tag":42,"props":764,"children":765},{},[766],{"type":20,"value":767},"\u003Csamp>",{"type":20,"value":769}," for indicating sample output from a program.",{"type":14,"tag":50,"props":771,"children":772},{},[773,780],{"type":14,"tag":54,"props":774,"children":775},{"v-slot:preview":7},[776],{"type":14,"tag":58,"props":777,"children":779},{"src":778},"/stories/core/code/sample-output",[],{"type":14,"tag":54,"props":781,"children":782},{"v-slot:vue":7},[783],{"type":14,"tag":17,"props":784,"children":787},{"className":785,"code":786,"language":70,"meta":7},[68],"\u003Ctemplate>\n    \u003Csamp>This text is meant to be treated as sample output from a computer program.\u003C/samp>\n\u003C/template>\n\n",[788],{"type":14,"tag":73,"props":789,"children":790},{},[791],{"type":14,"tag":17,"props":792,"children":793},{"__ignoreMap":7},[794,809,834],{"type":14,"tag":80,"props":795,"children":796},{"class":82,"line":83},[797,801,805],{"type":14,"tag":80,"props":798,"children":799},{"class":87},[800],{"type":20,"value":90},{"type":14,"tag":80,"props":802,"children":803},{"class":93},[804],{"type":20,"value":54},{"type":14,"tag":80,"props":806,"children":807},{"class":87},[808],{"type":20,"value":100},{"type":14,"tag":80,"props":810,"children":811},{"class":82,"line":103},[812,816,821,826,830],{"type":14,"tag":80,"props":813,"children":814},{"class":87},[815],{"type":20,"value":109},{"type":14,"tag":80,"props":817,"children":818},{"class":93},[819],{"type":20,"value":820},"samp",{"type":14,"tag":80,"props":822,"children":823},{"class":87},[824],{"type":20,"value":825},">This text is meant to be treated as sample output from a computer program.\u003C/",{"type":14,"tag":80,"props":827,"children":828},{"class":93},[829],{"type":20,"value":820},{"type":14,"tag":80,"props":831,"children":832},{"class":87},[833],{"type":20,"value":100},{"type":14,"tag":80,"props":835,"children":836},{"class":82,"line":168},[837,841,845],{"type":14,"tag":80,"props":838,"children":839},{"class":87},[840],{"type":20,"value":148},{"type":14,"tag":80,"props":842,"children":843},{"class":93},[844],{"type":20,"value":54},{"type":14,"tag":80,"props":846,"children":847},{"class":87},[848],{"type":20,"value":127},{"type":14,"tag":850,"children":851},"style",[852],{"type":20,"value":853},".ct-553616{color:#24292E;}\n.dark-theme .ct-553616{color:#E1E4E8;}\n.ct-914029{color:#22863A;}\n.dark-theme .ct-914029{color:#85E89D;}\n.ct-617022{color:#005CC5;}\n.dark-theme .ct-617022{color:#79B8FF;}",{"title":7,"searchDepth":103,"depth":103,"links":855},[856],{"id":25,"depth":103,"text":9,"children":857},[858,859,860,861,862],{"id":31,"depth":168,"text":34},{"id":184,"depth":168,"text":187},{"id":404,"depth":168,"text":407},{"id":542,"depth":168,"text":545},{"id":755,"depth":168,"text":758},"markdown","content:docs:ui:code.md","content","docs/ui/code.md","md",1794582258118]