docs/source/extension/images/code-cell-dom.svg

<?xml version="1.0" encoding="UTF-8"?>
<!-- Do not edit this file with editors other than diagrams.net -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="762px" height="792px" viewBox="-0.5 -0.5 762 792" content="&lt;mxfile host=&quot;app.diagrams.net&quot; modified=&quot;2021-11-25T17:00:10.318Z&quot; agent=&quot;5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/94.0.4606.81 Safari/537.36&quot; etag=&quot;TKjnVg_pTSflyx7xmt05&quot; version=&quot;15.8.3&quot; type=&quot;google&quot;&gt;&lt;diagram id=&quot;zOq2x0TiyNuPZxx3tNcP&quot; name=&quot;Page-1&quot;&gt;7ZrLctowFIafxks6lmUbs0xoUrpI0xlmmrVjC6xG+HiECJCnr4zlG1FAaTGXDtlE+nVkG3+/zlEULDycrb7xMEseICbMcux4ZeGvluOgAQrkr1xZK8UeDAplymmstFoY0zdSBip1QWMybwUKACZo1hYjSFMSiZYWcg7LdtgEWPuuWTgl74RxFLL36hONRVKogWfX+ojQaVLeGdlqZBaWwUqYJ2EMy4aE7yw85ACiaM1WQ8Lyt1e+l2Le/Qej1YNxkgqTCfavRxgHoxuUPPlsNbpH49uHnrrKa8gW6gNbjs/k9W6fZWOaN778znrqUpumZNzo/gBBngFeVEgxVz5ENV19eLEu3yiHRRqT/KFsObxMqCDjLIzy0aU0kdQSMWOyh2QzZHSayjYjk/xir4QLKuHcKFlAHj8XHF4qPE510zyarD58XaiCIO1LYEYEX8sQNQErbMq4geouaxP0faUlDQP0B0oMlfGm1ZVrNrKh8HwClWOOakTCmPASmBR6iVLUBF7T+X+IuW1iCGmQuRpkuCti2JxYj6bZQjzJt5mdNaYJZWwIDLjsp5CSKqgULQdjHw9w3A1Tz5BpVT8ODtU1h3ovc3t7GU6UcrZ8D48swKdeht4nliEsxHUd7oeK+4ZQXa8rqr4hVWAszOY6mPnw9zzt7omp8/OOwLNxRgKcvkEqQqZu07SKdEUUEW8y6dov3lbe1myfdLsn1O/KLv2D2OVxkx5M/AL7Iq+G2WUY1zYzjNtZnQ/MDLNJIDechM0yT2vxMrCjE5QU5BjkCO+oSWJgmiRi8kA5B34XUwHlDq/VqXxRqpdpBMmcbH66dkO1YV9v9Rtu8LRu6GzfWD6BUQr4yWGWiR2bjNwLHwWdpxc0teA4XkB4vxf6x7WC4TlZsT/YLgfQUC8DPeomxWurum5Rd1fWkWNGsmbWixLK4ksid/RKvrVeXc2f/D7WLdigM8yGZ29XzH+P2XdOj9nwNK7Iy7tqdJ25r0XazA1bR0Kub1ik3c7MYHjQV6NWy/9SWJ9uc75dxzWsPe3K7w624fnfFfa/wvY1/3M5NmzD07trmu88zevccKg0L7v11yE2Y41vleC7Pw==&lt;/diagram&gt;&lt;/mxfile&gt;" style="background-color: rgb(255, 255, 255);"><defs/><g><rect x="1" y="1" width="760" height="790" fill="rgba(255, 255, 255, 1)" stroke="rgba(0, 0, 0, 1)" stroke-width="2" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-start; justify-content: unsafe flex-start; width: 758px; height: 1px; padding-top: 8px; margin-left: 3px;"><div data-drawio-colors="color: rgba(0, 0, 0, 1); " style="box-sizing: border-box; font-size: 0px; text-align: left;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"><b>.jp-Cell .jp-CodeCell .jp-Notebook-Cell</b></div></div></div></foreignObject><text x="3" y="20" fill="rgba(0, 0, 0, 1)" font-family="Helvetica" font-size="12px">.jp-Cell .jp-CodeCell .jp-Notebook-Cell</text></switch></g><rect x="11" y="31" width="740" height="30" fill="rgba(255, 255, 255, 1)" stroke="rgba(0, 0, 0, 1)" stroke-width="2" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-start; justify-content: unsafe flex-start; width: 738px; height: 1px; padding-top: 38px; margin-left: 13px;"><div data-drawio-colors="color: rgba(0, 0, 0, 1); " style="box-sizing: border-box; font-size: 0px; text-align: left;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"><b>.jp-CellHeader .jp-Cell-header<br /></b></div></div></div></foreignObject><text x="13" y="50" fill="rgba(0, 0, 0, 1)" font-family="Helvetica" font-size="12px">.jp-CellHeader .jp-Cell-header&#xa;</text></switch></g><rect x="11" y="71" width="740" height="210" fill="none" stroke="#36393d" stroke-width="2" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-start; justify-content: unsafe flex-start; width: 738px; height: 1px; padding-top: 78px; margin-left: 13px;"><div data-drawio-colors="color: rgba(0, 0, 0, 1); " style="box-sizing: border-box; font-size: 0px; text-align: left;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"><b>.jp-Cell-inputWrapper<br /></b></div></div></div></foreignObject><text x="13" y="90" fill="rgba(0, 0, 0, 1)" font-family="Helvetica" font-size="12px">.jp-Cell-inputWrapper&#xa;</text></switch></g><rect x="11" y="751" width="740" height="30" fill="rgba(255, 255, 255, 1)" stroke="rgba(0, 0, 0, 1)" stroke-width="2" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-start; justify-content: unsafe flex-start; width: 738px; height: 1px; padding-top: 758px; margin-left: 13px;"><div data-drawio-colors="color: rgba(0, 0, 0, 1); " style="box-sizing: border-box; font-size: 0px; text-align: left;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"><b>.jp-CellFooter .jp-Cell-footer<br /></b></div></div></div></foreignObject><text x="13" y="770" fill="rgba(0, 0, 0, 1)" font-family="Helvetica" font-size="12px">.jp-CellFooter .jp-Cell-footer&#xa;</text></switch></g><rect x="11" y="291" width="740" height="450" fill="none" stroke="#36393d" stroke-width="2" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-start; justify-content: unsafe flex-start; width: 738px; height: 1px; padding-top: 298px; margin-left: 13px;"><div data-drawio-colors="color: rgba(0, 0, 0, 1); " style="box-sizing: border-box; font-size: 0px; text-align: left;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"><b>.jp-Cell-outputWrapper<br /></b></div></div></div></foreignObject><text x="13" y="310" fill="rgba(0, 0, 0, 1)" font-family="Helvetica" font-size="12px">.jp-Cell-outputWrapper&#xa;</text></switch></g><rect x="21" y="101" width="60" height="170" fill="#cce5ff" stroke="#36393d" stroke-width="2" pointer-events="all"/><g transform="translate(-0.5 -0.5)rotate(-90 28 269)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-start; justify-content: unsafe flex-start; width: 168px; height: 1px; padding-top: 269px; margin-left: 28px;"><div data-drawio-colors="color: rgba(0, 0, 0, 1); " style="box-sizing: border-box; font-size: 0px; text-align: left;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"><b>.jp-Collapser<br />.jp-InputCollapser<br />.jp-Cell-inputCollapser<br /></b></div></div></div></foreignObject><text x="28" y="281" fill="rgba(0, 0, 0, 1)" font-family="Helvetica" font-size="12px">.jp-Collapser...</text></switch></g><rect x="21" y="321" width="60" height="410" fill="#cce5ff" stroke="#36393d" stroke-width="2" pointer-events="all"/><g transform="translate(-0.5 -0.5)rotate(-90 28 729)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-start; justify-content: unsafe flex-start; width: 408px; height: 1px; padding-top: 729px; margin-left: 28px;"><div data-drawio-colors="color: rgba(0, 0, 0, 1); " style="box-sizing: border-box; font-size: 0px; text-align: left;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"><b>.jp-Collapser<br />.jp-OutputCollapser<br />.jp-Cell-outputCollapser<br /></b></div></div></div></foreignObject><text x="28" y="741" fill="rgba(0, 0, 0, 1)" font-family="Helvetica" font-size="12px">.jp-Collapser...</text></switch></g><rect x="91" y="101" width="650" height="170" fill="none" stroke="#36393d" stroke-width="2" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-start; justify-content: unsafe flex-start; width: 648px; height: 1px; padding-top: 108px; margin-left: 93px;"><div data-drawio-colors="color: rgba(0, 0, 0, 1); " style="box-sizing: border-box; font-size: 0px; text-align: left;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"><b>.jp-InputArea .jp-Cell-inputArea<br /></b></div></div></div></foreignObject><text x="93" y="120" fill="rgba(0, 0, 0, 1)" font-family="Helvetica" font-size="12px">.jp-InputArea .jp-Cell-inputArea&#xa;</text></switch></g><rect x="181" y="131" width="550" height="130" fill="#eeeeee" stroke="#36393d" stroke-width="2" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-start; justify-content: unsafe flex-start; width: 548px; height: 1px; padding-top: 138px; margin-left: 183px;"><div data-drawio-colors="color: rgba(0, 0, 0, 1); " style="box-sizing: border-box; font-size: 0px; text-align: left;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"><b>.jp-CodeMirrorEditor .jp-Editor .jp-InputAreaEditor<br /></b></div></div></div></foreignObject><text x="183" y="150" fill="rgba(0, 0, 0, 1)" font-family="Helvetica" font-size="12px">.jp-CodeMirrorEditor .jp-Editor .jp-InputAreaEditor&#xa;</text></switch></g><rect x="101" y="131" width="70" height="130" fill="#eeeeee" stroke="#36393d" stroke-width="2" pointer-events="all"/><g transform="translate(-0.5 -0.5)rotate(-90 108 259)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-start; justify-content: unsafe flex-start; width: 128px; height: 1px; padding-top: 259px; margin-left: 108px;"><div data-drawio-colors="color: rgba(0, 0, 0, 1); " style="box-sizing: border-box; font-size: 0px; text-align: left;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"><b>.jp-InputPrompt<br />.jp-InputAreaPrompt<br /></b></div></div></div></foreignObject><text x="108" y="271" fill="rgba(0, 0, 0, 1)" font-family="Helvetica" font-size="12px">.jp-InputPrompt...</text></switch></g><rect x="91" y="321" width="650" height="410" fill="rgba(255, 255, 255, 1)" stroke="rgba(0, 0, 0, 1)" stroke-width="2" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-start; justify-content: unsafe flex-start; width: 648px; height: 1px; padding-top: 328px; margin-left: 93px;"><div data-drawio-colors="color: rgba(0, 0, 0, 1); " style="box-sizing: border-box; font-size: 0px; text-align: left;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"><b>.jp-OutputArea .jp-Cell-outputArea<br /></b></div></div></div></foreignObject><text x="93" y="340" fill="rgba(0, 0, 0, 1)" font-family="Helvetica" font-size="12px">.jp-OutputArea .jp-Cell-outputArea&#xa;</text></switch></g><rect x="101" y="351" width="630" height="180" fill="none" stroke="#36393d" stroke-width="2" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-start; justify-content: unsafe flex-start; width: 628px; height: 1px; padding-top: 358px; margin-left: 103px;"><div data-drawio-colors="color: rgba(0, 0, 0, 1); " style="box-sizing: border-box; font-size: 0px; text-align: left;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"><b>.jp-outputArea-child<br /></b></div></div></div></foreignObject><text x="103" y="370" fill="rgba(0, 0, 0, 1)" font-family="Helvetica" font-size="12px">.jp-outputArea-child&#xa;</text></switch></g><rect x="101" y="541" width="630" height="180" fill="none" stroke="#36393d" stroke-width="2" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-start; justify-content: unsafe flex-start; width: 628px; height: 1px; padding-top: 548px; margin-left: 103px;"><div data-drawio-colors="color: rgba(0, 0, 0, 1); " style="box-sizing: border-box; font-size: 0px; text-align: left;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"><b>.jp-outputArea-child<br /></b></div></div></div></foreignObject><text x="103" y="560" fill="rgba(0, 0, 0, 1)" font-family="Helvetica" font-size="12px">.jp-outputArea-child&#xa;</text></switch></g><rect x="111" y="381" width="70" height="140" fill="#eeeeee" stroke="#36393d" stroke-width="2" pointer-events="all"/><g transform="translate(-0.5 -0.5)rotate(-90 118 519)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-start; justify-content: unsafe flex-start; width: 138px; height: 1px; padding-top: 519px; margin-left: 118px;"><div data-drawio-colors="color: rgba(0, 0, 0, 1); " style="box-sizing: border-box; font-size: 0px; text-align: left;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"><b>.jp-OutputPrompt<br />.jp-OutputAreaPrompt<br /></b></div></div></div></foreignObject><text x="118" y="531" fill="rgba(0, 0, 0, 1)" font-family="Helvetica" font-size="12px">.jp-OutputPrompt...</text></switch></g><rect x="191" y="381" width="530" height="140" fill="#eeeeee" stroke="#36393d" stroke-width="2" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-start; justify-content: unsafe flex-start; width: 528px; height: 1px; padding-top: 388px; margin-left: 193px;"><div data-drawio-colors="color: rgba(0, 0, 0, 1); " style="box-sizing: border-box; font-size: 0px; text-align: left;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"><b>.jp-OutputArea-output<br /></b></div></div></div></foreignObject><text x="193" y="400" fill="rgba(0, 0, 0, 1)" font-family="Helvetica" font-size="12px">.jp-OutputArea-output&#xa;</text></switch></g><rect x="191" y="571" width="530" height="140" fill="#eeeeee" stroke="#36393d" stroke-width="2" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-start; justify-content: unsafe flex-start; width: 528px; height: 1px; padding-top: 578px; margin-left: 193px;"><div data-drawio-colors="color: rgba(0, 0, 0, 1); " style="box-sizing: border-box; font-size: 0px; text-align: left;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"><b>.jp-OutputArea-output<br /></b></div></div></div></foreignObject><text x="193" y="590" fill="rgba(0, 0, 0, 1)" font-family="Helvetica" font-size="12px">.jp-OutputArea-output&#xa;</text></switch></g><rect x="111" y="571" width="70" height="140" fill="#eeeeee" stroke="#36393d" stroke-width="2" pointer-events="all"/><g transform="translate(-0.5 -0.5)rotate(-90 118 709)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-start; justify-content: unsafe flex-start; width: 138px; height: 1px; padding-top: 709px; margin-left: 118px;"><div data-drawio-colors="color: rgba(0, 0, 0, 1); " style="box-sizing: border-box; font-size: 0px; text-align: left;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"><b>.jp-OutputPrompt<br />.jp-OutputAreaPrompt<br /></b></div></div></div></foreignObject><text x="118" y="721" fill="rgba(0, 0, 0, 1)" font-family="Helvetica" font-size="12px">.jp-OutputPrompt...</text></switch></g></g><switch><g requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"/><a transform="translate(0,-5)" xlink:href="https://www.diagrams.net/doc/faq/svg-export-text-problems" target="_blank"><text text-anchor="middle" font-size="10px" x="50%" y="100%">Viewer does not support full SVG 1.1</text></a></switch></svg>