1"use strict";(self.webpackChunknodality=self.webpackChunknodality||[]).push([[3526],{8161:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>i,contentTitle:()=>o,default:()=>h,frontMatter:()=>d,metadata:()=>s,toc:()=>r});const s=JSON.parse('{"id":"elements/code","title":"Code","description":"You can use the `code` element to display a block of code.","source":"@site/docs/elements/code.md","sourceDirName":"elements","slug":"/elements/code","permalink":"/docs/elements/code","draft":false,"unlisted":false,"editUrl":"https://github.com/nodalityjs/docs/edit/main/docs/elements/code.md","tags":[],"version":"current","frontMatter":{},"sidebar":"tutorialSidebar","previous":{"title":"Card","permalink":"/docs/elements/cards"},"next":{"title":"Dropdown","permalink":"/docs/elements/dropdown"}}');var l=t(4848),c=t(8453);const d={},o="Code",i={},r=[{value:"Syntax",id:"syntax",level:2},{value:"Rendered Element",id:"rendered-element",level:2}];function a(e){const n={code:"code",h1:"h1",h2:"h2",header:"header",p:"p",pre:"pre",...(0,c.R)(),...e.components};return(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(n.header,{children:(0,l.jsx)(n.h1,{id:"code",children:"Code"})}),"\n",(0,l.jsxs)(n.p,{children:["You can use the ",(0,l.jsx)(n.code,{children:"code"})," element to display a block of code."]}),"\n",(0,l.jsx)(n.h2,{id:"syntax",children:"Syntax"}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-js",children:'let elements = [\n {\n type: "code"\n }\n];\n'})}),"\n",(0,l.jsx)(n.h2,{id:"rendered-element",children:"Rendered Element"}),"\n",(0,l.jsxs)(n.p,{children:["The instance of ",(0,l.jsx)(n.code,{children:"Code"})," class will be created."]}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-js",children:'new Code()\n.set({\n class: "language-js",\n code: `let text = new Text("Hello").set({})`\n}),\n'})}),"\n",(0,l.jsxs)(n.p,{children:["In this example, we set the class to ",(0,l.jsx)(n.code,{children:"language-js"})," to the code element.\nWhen use in conjuction with ",(0,l.jsx)(n.code,{children:"hljs"})," library, the syntax will be correctly highlighted. We need to use ",(0,l.jsx)(n.code,{children:"hljs.highlightAll()"})," method, to use its syntax highlighting."]}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-html",children:'<link rel="stylesheet" href="https://unpkg.com/@highlightjs/[email protected]/styles/default.min.css">\n<link href="https://fonts.googleapis.com/css2?family=Oswald:[email protected]&display=swap" rel="stylesheet">\n<script src="https://unpkg.com/@highlightjs/[email protected]/highlight.min.js"><\/script>\n'})}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-js",children:"hljs.higlightAll()\n"})})]})}function h(e={}){const{wrapper:n}={...(0,c.R)(),...e.components};return n?(0,l.jsx)(n,{...e,children:(0,l.jsx)(a,{...e})}):a(e)}},8453:(e,n,t)=>{t.d(n,{R:()=>d,x:()=>o});var s=t(6540);const l={},c=s.createContext(l);function d(e){const n=s.useContext(c);return s.useMemo(function(){return"function"==typeof e?e(n):{...n,...e}},[n,e])}function o(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(l):e.components||l:d(e.components),s.createElement(c.Provider,{value:n},e.children)}}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.