SALT-NLP/Design2Code
This dataset consists of 484 webpages from the C4 validation set, serving the purpose of testing multimodal LLMs on converting visual designs into code implementations. Each example is a pair of source HTML and screenshot ({id}.html and {id}.png). See the dataset in the huggingface format here. Note that all images in these webpages are replaced by a placeholder image (rick.jpg) Please refer to our project page and our paper for more information. Example Usage For example, you… See the full description on the dataset page: https://huggingface.co/datasets/SALT-NLP/Design2Code.
221.8k
1<!DOCTYPE html>2<html lang="en-GB">3 <head>4 <style>5 @font-face {6 font-family: 'Open Sans';7 font-style: normal;8 font-weight: 400;9 font-stretch: normal;10 src: url(https://fonts.gstatic.com/s/opensans/v36/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4gaVc.ttf) format('truetype');11}12@font-face {13 font-family: 'Open Sans';14 font-style: normal;15 font-weight: 700;16 font-stretch: normal;17 src: url(https://fonts.gstatic.com/s/opensans/v36/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsg-1x4gaVc.ttf) format('truetype');18}19@font-face {20 font-family: 'Raleway';21 font-style: normal;22 font-weight: 500;23 src: url(https://fonts.gstatic.com/s/raleway/v29/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvoorCIPrQ.ttf) format('truetype');24}25@font-face {26 font-family: 'Ubuntu Mono';27 font-style: italic;28 font-weight: 400;29 src: url(https://fonts.gstatic.com/s/ubuntumono/v17/KFOhCneDtsqEr0keqCMhbCc_OsbSlQ.ttf) format('truetype');30}31@font-face {32 font-family: 'Ubuntu Mono';33 font-style: italic;34 font-weight: 700;35 src: url(https://fonts.gstatic.com/s/ubuntumono/v17/KFO8CneDtsqEr0keqCMhbCc_Mn33hY9uew.ttf) format('truetype');36}37@font-face {38 font-family: 'Ubuntu Mono';39 font-style: normal;40 font-weight: 400;41 src: url(https://fonts.gstatic.com/s/ubuntumono/v17/KFOjCneDtsqEr0keqCMhbCc6CsE.ttf) format('truetype');42}43@font-face {44 font-family: 'Ubuntu Mono';45 font-style: normal;46 font-weight: 700;47 src: url(https://fonts.gstatic.com/s/ubuntumono/v17/KFO-CneDtsqEr0keqCMhbC-BL9H1tYg.ttf) format('truetype');48}49 50 51 52/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}53 54 55.hll{background-color:#ffc}.c{color:#998;font-style:italic}.err{color:#a61717;background-color:#e3d2d2}.k{color:#000;font-weight:700}.o{color:#000;font-weight:700}.cm{color:#998;font-style:italic}.cp{color:#999;font-weight:700;font-style:italic}.c1{color:#998;font-style:italic}.cs{color:#999;font-weight:700;font-style:italic}.gd{color:#000;background-color:#fdd}.ge{color:#000;font-style:italic}.gr{color:#a00}.gh{color:#999}.gi{color:#000;background-color:#dfd}.go{color:#888}.gp{color:#555}.gs{font-weight:700}.gu{color:#aaa}.gt{color:#a00}.kc{color:#000;font-weight:700}.kd{color:#000;font-weight:700}.kn{color:#000;font-weight:700}.kp{color:#000;font-weight:700}.kr{color:#000;font-weight:700}.kt{color:#458;font-weight:700}.m{color:#099}.s{color:#d01040}.na{color:teal}.nb{color:#0086B3}.nc{color:#458;font-weight:700}.no{color:teal}.nd{color:#3c5d5d;font-weight:700}.ni{color:purple}.ne{color:#900;font-weight:700}.nf{color:#900;font-weight:700}.nl{color:#900;font-weight:700}.nn{color:#555}.nt{color:navy}.nv{color:teal}.ow{color:#000;font-weight:700}.w{color:#bbb}.mf{color:#099}.mh{color:#099}.mi{color:#099}.mo{color:#099}.sb{color:#d01040}.sc{color:#d01040}.sd{color:#d01040}.s2{color:#d01040}.se{color:#d01040}.sh{color:#d01040}.si{color:#d01040}.sx{color:#d01040}.sr{color:#009926}.s1{color:#d01040}.ss{color:#990073}.bp{color:#999}.vc{color:teal}.vg{color:teal}.vi{color:teal}.il{color:#099}56 57 58.dark {59 color: #333 !important;60}61.light {62 color: #666 !important;63}64.accent {65 color: #428bca !important;66}67@media (min-width: 550px) {68 .small-screens-only {69 display: none;70 }71}72.large-screens-only {73 display: none;74}75@media (min-width: 550px) {76 .large-screens-only {77 display: initial;78 }79}80*,81*:before,82*:after {83 box-sizing: border-box;84}85a,86a:focus,87a:active {88 text-decoration: none;89}90html {91 height: 100%;92 font-size: 16px;93}94body {95 display: -webkit-flex;96 display: -moz-flex;97 display: -ms-flexbox;98 display: -ms-flex;99 display: flex;100 -webkit-flex-direction: column;101 -moz-flex-direction: column;102 -ms-flex-direction: column;103 flex-direction: column;104 -webkit-align-items: center;105 -moz-align-items: center;106 -ms-align-items: center;107 align-items: center;108 -webkit-justify-content: flex-start;109 -moz-justify-content: flex-start;110 -ms-justify-content: flex-start;111 justify-content: flex-start;112 width: 100%;113 min-height: 100%;114 font-weight: 400;115 font-family: 'Open Sans', 'Helvetica Neue', 'Arial', sans-serif;116 color: #111;117 line-height: 1.6;118 text-rendering: optimizeLegibility !important;119}120@media (min-width: 600px) {121 body {122 -webkit-justify-content: center;123 -moz-justify-content: center;124 -ms-justify-content: center;125 justify-content: center;126 }127 .non-narrow.zero-top-spacing {128 padding-top: 0 !important;129 }130}131section {132 display: -webkit-flex;133 display: -moz-flex;134 display: -ms-flexbox;135 display: -ms-flex;136 display: flex;137 -webkit-justify-content: center;138 -moz-justify-content: center;139 -ms-justify-content: center;140 justify-content: center;141 -webkit-align-items: center;142 -moz-align-items: center;143 -ms-align-items: center;144 align-items: center;145 width: 100%;146}147.container {148 display: -webkit-flex;149 display: -moz-flex;150 display: -ms-flexbox;151 display: -ms-flex;152 display: flex;153 width: 100%;154}155.container .content {156 width: 100%;157}158@media (min-width: 600px) {159 section {160 padding: 0 16px;161 margin-left: 100px;162 margin-right: 100px;163 max-width: 750px;164 }165}166section.header {167 -webkit-order: 0;168 -moz-order: 0;169 -ms-order: 0;170 order: 0;171}172section.icons {173 -webkit-order: 1;174 -moz-order: 1;175 -ms-order: 1;176 order: 1;177}178section.main {179 -webkit-order: 2;180 -moz-order: 2;181 -ms-order: 2;182 order: 2;183}184@media (min-width: 600px) {185 section.header {186 -webkit-order: 0;187 -moz-order: 0;188 -ms-order: 0;189 order: 0;190 }191 section.icons {192 -webkit-order: 2;193 -moz-order: 2;194 -ms-order: 2;195 order: 2;196 }197 section.main {198 -webkit-order: 1;199 -moz-order: 1;200 -ms-order: 1;201 order: 1;202 }203}204section.header {205 background-color: #f7f7f7;206}207section.header .container {208 -webkit-align-items: center;209 -moz-align-items: center;210 -ms-align-items: center;211 align-items: center;212 -webkit-justify-content: center;213 -moz-justify-content: center;214 -ms-justify-content: center;215 justify-content: center;216}217section.header .content {218 display: -webkit-flex;219 display: -moz-flex;220 display: -ms-flexbox;221 display: -ms-flex;222 display: flex;223 -webkit-flex-direction: column;224 -moz-flex-direction: column;225 -ms-flex-direction: column;226 flex-direction: column;227 -webkit-align-items: center;228 -moz-align-items: center;229 -ms-align-items: center;230 align-items: center;231}232section.header .avatar {233 border-radius: 50%;234 box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.2);235 max-width: 50px;236}237section.header .name {238 font-size: 1.5rem;239 font-family: 'Raleway', 'Helvetica Neue', 'Arial', sans-serif;240 letter-spacing: -0.005rem;241 font-weight: 700;242 color: #333;243 text-transform: uppercase;244 color: #555;245}246section.header h3.self-intro {247 font-size: 1em;248 font-family: 'Raleway', 'Helvetica Neue', 'Arial', sans-serif;249 letter-spacing: -0.005rem;250 font-weight: 700;251 color: #333;252 font-weight: 400;253 color: #555;254 margin-bottom: 1rem;255}256section.header nav {257 font-size: 14px;258 margin-bottom: 16px;259 text-transform: uppercase;260 font-family: 'Raleway', 'Helvetica Neue', 'Arial', sans-serif;261}262section.header nav ul {263 list-style: none;264 text-align: center;265 display: -webkit-inline-flex;266 display: -moz-inline-flex;267 display: -ms-inline-flexbox;268 display: -ms-inline-flex;269 display: inline-flex;270 padding: 0px;271}272section.header nav ul li {273 margin-left: 6px;274 margin-right: 6px;275}276section.header nav ul li:first-child {277 margin-left: 0;278}279section.header nav ul li:last-child {280 margin-right: 0;281}282section.header nav ul a {283 color: #555;284 font-weight: 500;285 -webkit-transition: color 0.1s cubic-bezier(0.47, 0, 0.75, 0.72);286 -moz-transition: color 0.1s cubic-bezier(0.47, 0, 0.75, 0.72);287 -ms-transition: color 0.1s cubic-bezier(0.47, 0, 0.75, 0.72);288 -o-transition: color 0.1s cubic-bezier(0.47, 0, 0.75, 0.72);289 transition: color 0.1s cubic-bezier(0.47, 0, 0.75, 0.72);290}291section.header nav ul a:hover {292 color: #111;293}294@media (min-width: 600px) {295 section.header {296 background-color: transparent;297 }298 section.header .container {299 -webkit-justify-content: flex-start;300 -moz-justify-content: flex-start;301 -ms-justify-content: flex-start;302 justify-content: flex-start;303 }304 section.header .content {305 -webkit-align-items: flex-start;306 -moz-align-items: flex-start;307 -ms-align-items: flex-start;308 align-items: flex-start;309 }310 section.header .name {311 color: #333;312 }313 section.header nav {314 font-size: 14px;315 margin-bottom: 0;316 }317 section.header nav ul {318 text-align: left;319 }320 section.header nav ul a {321 color: #666;322 }323 section.header nav ul a:hover {324 color: #333;325 }326}327section.icons {328 background-color: #f7f7f7;329}330section.icons .container {331 -webkit-align-items: center;332 -moz-align-items: center;333 -ms-align-items: center;334 align-items: center;335 -webkit-justify-content: center;336 -moz-justify-content: center;337 -ms-justify-content: center;338 justify-content: center;339}340section.icons .content {341 width: auto;342}343section.icons .content a {344 margin-left: 6px;345 margin-right: 6px;346 opacity: 0.6;347 -webkit-transition: opacity 0.1s cubic-bezier(0.47, 0, 0.75, 0.72);348 -moz-transition: opacity 0.1s cubic-bezier(0.47, 0, 0.75, 0.72);349 -ms-transition: opacity 0.1s cubic-bezier(0.47, 0, 0.75, 0.72);350 -o-transition: opacity 0.1s cubic-bezier(0.47, 0, 0.75, 0.72);351 transition: opacity 0.1s cubic-bezier(0.47, 0, 0.75, 0.72);352}353section.icons .content a:first-child {354 margin-left: 0;355}356section.icons .content a:last-child {357 margin-right: 0;358}359section.icons .content a:hover {360 opacity: 0.8;361}362section.icons .content a .icon {363 width: 16px;364 height: 16px;365}366section.icons .content a .flag {367 border-radius: 50%;368}369@media (min-width: 600px) {370 section.icons {371 background-color: transparent;372 }373 section.icons .container {374 -webkit-justify-content: flex-start;375 -moz-justify-content: flex-start;376 -ms-justify-content: flex-start;377 justify-content: flex-start;378 }379 section.icons .content a {380 margin-left: 3px;381 margin-right: 3px;382 }383}384section.main .container {385 -webkit-align-items: center;386 -moz-align-items: center;387 -ms-align-items: center;388 align-items: center;389 -webkit-justify-content: flex-start;390 -moz-justify-content: flex-start;391 -ms-justify-content: flex-start;392 justify-content: flex-start;393}394section.main .content {395 color: #111;396 font-size: 16px;397}398section.main .content .title-container {399 display: -webkit-flex;400 display: -moz-flex;401 display: -ms-flexbox;402 display: -ms-flex;403 display: flex;404 -webkit-justify-content: space-between;405 -moz-justify-content: space-between;406 -ms-justify-content: space-between;407 justify-content: space-between;408}409section.main .content .page-heading {410 font-size: 1.5rem;411 font-family: 'Raleway', 'Helvetica Neue', 'Arial', sans-serif;412 letter-spacing: -0.005rem;413 font-weight: 700;414 color: #333;415 text-transform: uppercase;416 margin-bottom: 16px;417}418section.main .content .page-heading + ul {419 padding: 0px;420}421section.main .content .front-matter .page-heading {422 margin-bottom: 0;423}424section.main .content .front-matter .meta {425 color: #666;426 display: -webkit-flex;427 display: -moz-flex;428 display: -ms-flexbox;429 display: -ms-flex;430 display: flex;431 margin-bottom: 32px;432}433section.main .content .front-matter .date,434section.main .content .front-matter .word-count,435section.main .content .front-matter .reading-time .middot {436 display: none;437}438section.main .content .front-matter .middot {439 font-size: 6px;440 margin: 0 6px;441 display: inline;442 vertical-align: middle;443}444section.main .content .front-matter .middot:before {445 content: "•";446}447@media (min-width: 600px) {448 section.main .content .front-matter .date,449 section.main .content .front-matter .word-count,450 section.main .content .front-matter .reading-time .middot {451 display: initial;452 }453}454section.main .container.f04 {455 -webkit-justify-content: center;456 -moz-justify-content: center;457 -ms-justify-content: center;458 justify-content: center;459}460section.main .container.f04 .content {461 display: -webkit-flex;462 display: -moz-flex;463 display: -ms-flexbox;464 display: -ms-flex;465 display: flex;466 -webkit-flex-direction: column;467 -moz-flex-direction: column;468 -ms-flex-direction: column;469 flex-direction: column;470 -webkit-align-items: center;471 -moz-align-items: center;472 -ms-align-items: center;473 align-items: center;474}475section.main .container.f04 .content .num {476 margin: 30px 0px 30px 0;477 font-weight: 200;478 font-family: 'Raleway', 'Helvetica Neue', 'Arial', sans-serif;479 font-size: 50px;480}481section.main .container.f04 .content .detail {482 margin-bottom: 40px;483}484@media (min-width: 600px) {485 section.main .container.f04 {486 -webkit-justify-content: flex-start;487 -moz-justify-content: flex-start;488 -ms-justify-content: flex-start;489 justify-content: flex-start;490 }491 section.main .container.f04 .content {492 -webkit-align-items: flex-start;493 -moz-align-items: flex-start;494 -ms-align-items: flex-start;495 align-items: flex-start;496 }497 section.main .container.f04 .content .num {498 margin: 0 0 10px 0;499 font-size: 32px;500 }501 section.main .container.f04 .content .detail {502 margin-bottom: 30px;503 }504}505section.main .container .content .post-item {506 display: -webkit-flex;507 display: -moz-flex;508 display: -ms-flexbox;509 display: -ms-flex;510 display: flex;511 -webkit-align-items: center;512 -moz-align-items: center;513 -ms-align-items: center;514 align-items: center;515 display: list-item;516 list-style: disc inside;517}518section.main .container .content .post-item .meta {519 color: #666;520 display: none;521 min-width: 100px;522 text-align: right;523 margin-right: 16px;524}525section.main .container .content .no-bullet {526 color: transparent;527 font-style: oblique;528 margin-top: 2rem;529 margin-bottom: 1rem;530}531section.main .container .content .no-bullet .date {532 font-size: 1.5rem;533 font-family: 'Raleway', 'Helvetica Neue', 'Arial', sans-serif;534 letter-spacing: -0.005rem;535 font-weight: 700;536 color: #333;537 color: #666 !important;538 font-style: normal;539}540section {541 padding: 0 16px;542}543section.header {544 padding-top: 32px;545 padding-bottom: 16px;546}547section.icons a {548 display: inline-block;549 padding-top: 0;550 padding-bottom: 32px;551}552section.main {553 padding-top: 32px;554 padding-bottom: 32px;555}556@media (min-width: 600px) {557 .container {558 margin: 0 30px;559 }560 section.main {561 padding-top: 0;562 padding-bottom: 0;563 }564 section.main .container .content .post-item {565 display: flex;566 list-style: none;567 }568 section.main .container .content .post-item .meta {569 display: block;570 }571}572a {573 color: #428bca;574 -webkit-transition: color 0.1s cubic-bezier(0.47, 0, 0.75, 0.72);575 -moz-transition: color 0.1s cubic-bezier(0.47, 0, 0.75, 0.72);576 -ms-transition: color 0.1s cubic-bezier(0.47, 0, 0.75, 0.72);577 -o-transition: color 0.1s cubic-bezier(0.47, 0, 0.75, 0.72);578 transition: color 0.1s cubic-bezier(0.47, 0, 0.75, 0.72);579}580a:hover {581 color: #2a6496;582}583img {584 max-width: 100%;585}586img.profile {587 min-width: 100%;588}589@media (min-width: 600px) {590 img.profile {591 min-width: 300px;592 max-width: 300px !important;593 }594}595.page-heading a {596 color: #333;597}598section.main .content .markdown h1,599section.main .content .markdown h2,600section.main .content .markdown h3,601section.main .content .markdown h4,602section.main .content .markdown h5,603section.main .content .markdown h6 {604 font-size: 1.5rem;605 font-family: 'Raleway', 'Helvetica Neue', 'Arial', sans-serif;606 letter-spacing: -0.005rem;607 font-weight: 700;608 color: #333;609 text-transform: none;610 margin-top: 1.75rem;611}612section.main .content .markdown h1 {613 font-size: 1.75rem;614 margin-bottom: 2rem;615}616section.main .content .markdown h2 {617 font-size: 1.5rem;618 margin-bottom: 1.5rem;619}620section.main .content .markdown h3 {621 font-size: 1rem;622 margin-bottom: 1rem;623}624section.main .content .markdown h4,625section.main .content .markdown h5,626section.main .content .markdown h6 {627 font-size: 1rem;628 margin-bottom: 1rem;629 letter-spacing: none;630}631section.main .content .markdown code,632section.main .content .markdown pre {633 font-family: 'Ubuntu Mono', 'Menlo', monospace;634 font-size: 1rem;635 background-color: #f7f7f7;636}637section.main .content .markdown code {638 /* enclosed by single backtick (`) */639 padding: .15em .5em;640 border-radius: 2px;641}642section.main .content .markdown pre {643 /* Hugo specific: consider using the 'highlight' shortcode */644 padding: 1rem;645 line-height: 1.5em;646 white-space: pre;647 white-space: pre-wrap;648 word-break: break-all;649 word-wrap: break-word;650}651section.main .content .markdown pre code {652 /* enclosed by 3 backticks (```) */653 padding: 0;654 font-size: 1rem;655}656section.main .content .markdown a code {657 color: #428bca !important;658}659section.main .content .markdown a code:hover {660 text-decoration: underline;661}662section.main .content .markdown p {663 /* Invoked by line break */664 font-size: 1rem;665 margin-top: 0;666 margin-bottom: 1em;667}668section.main .content .markdown dt {669 font-weight: bold;670}671section.main .content .markdown ul li {672 list-style-type: disc;673}674section.main .content .markdown ol li {675 list-style-type: decimal;676}677section.main .content .markdown li {678 list-style-position: outside;679 margin-left: 1em;680}681section.main .content .markdown em {682 font-style: italic;683}684section.main .content .markdown strong {685 font-weight: 700;686}687section.main .content .markdown hr {688 position: relative;689 margin: 1.75rem 0;690 border: 0;691 border-top: 1px solid #808080;692 border-top: 1px solid #999999;693}694section.main .content .markdown abbr {695 font-size: 0.85rem;696 font-weight: bold;697 color: #666666;698 text-transform: uppercase;699}700section.main .content .markdown abbr[title] {701 cursor: help;702 border-bottom: 1px dotted #808080;703}704section.main .content .markdown blockquote {705 padding: .5rem 1rem;706 margin: .8rem 0;707 color: #7a7a7a;708 border-left: .25rem solid #e5e5e5;709}710section.main .content .markdown blockquote :last-child {711 margin-bottom: 0.5rem;712}713@media (min-width: 550px) {714 section.main .content .markdown blockquote {715 padding-right: 5rem;716 padding-left: 1.25rem;717 }718}719section.main .content .markdown img {720 margin: 1rem 0;721 max-width: 100%;722}723section.main .content .markdown table {724 margin-bottom: 1rem;725 width: 100%;726 border: 1px solid #e5e5e5;727 border-collapse: collapse;728}729section.main .content .markdown td,730section.main .content .markdown th {731 padding: .25rem .5rem;732 border: 1px solid #e5e5e5;733}734section.main .content .markdown tbody tr:nth-child(odd) td,735section.main .content .markdown tbody tr:nth-child(odd) th {736 background-color: #f7f7f7;737}738 739 740 741section.main .content .markdown pre > code {742 background-color: unset;743}744section.main .content .markdown h3 {745 font-size: 1.2rem;746}747 748 749 750@font-face{font-family:KaTeX_AMS;src:url(fonts/KaTeX_AMS-Regular.woff2) format("woff2"),url(fonts/KaTeX_AMS-Regular.woff) format("woff"),url(fonts/KaTeX_AMS-Regular.ttf) format("truetype");font-weight:400;font-style:normal}@font-face{font-family:KaTeX_Caligraphic;src:url(fonts/KaTeX_Caligraphic-Bold.woff2) format("woff2"),url(fonts/KaTeX_Caligraphic-Bold.woff) format("woff"),url(fonts/KaTeX_Caligraphic-Bold.ttf) format("truetype");font-weight:700;font-style:normal}@font-face{font-family:KaTeX_Caligraphic;src:url(fonts/KaTeX_Caligraphic-Regular.woff2) format("woff2"),url(fonts/KaTeX_Caligraphic-Regular.woff) format("woff"),url(fonts/KaTeX_Caligraphic-Regular.ttf) format("truetype");font-weight:400;font-style:normal}@font-face{font-family:KaTeX_Fraktur;src:url(fonts/KaTeX_Fraktur-Bold.woff2) format("woff2"),url(fonts/KaTeX_Fraktur-Bold.woff) format("woff"),url(fonts/KaTeX_Fraktur-Bold.ttf) format("truetype");font-weight:700;font-style:normal}@font-face{font-family:KaTeX_Fraktur;src:url(fonts/KaTeX_Fraktur-Regular.woff2) format("woff2"),url(fonts/KaTeX_Fraktur-Regular.woff) format("woff"),url(fonts/KaTeX_Fraktur-Regular.ttf) format("truetype");font-weight:400;font-style:normal}@font-face{font-family:KaTeX_Main;src:url(fonts/KaTeX_Main-Bold.woff2) format("woff2"),url(fonts/KaTeX_Main-Bold.woff) format("woff"),url(fonts/KaTeX_Main-Bold.ttf) format("truetype");font-weight:700;font-style:normal}@font-face{font-family:KaTeX_Main;src:url(fonts/KaTeX_Main-BoldItalic.woff2) format("woff2"),url(fonts/KaTeX_Main-BoldItalic.woff) format("woff"),url(fonts/KaTeX_Main-BoldItalic.ttf) format("truetype");font-weight:700;font-style:italic}@font-face{font-family:KaTeX_Main;src:url(fonts/KaTeX_Main-Italic.woff2) format("woff2"),url(fonts/KaTeX_Main-Italic.woff) format("woff"),url(fonts/KaTeX_Main-Italic.ttf) format("truetype");font-weight:400;font-style:italic}@font-face{font-family:KaTeX_Main;src:url(fonts/KaTeX_Main-Regular.woff2) format("woff2"),url(fonts/KaTeX_Main-Regular.woff) format("woff"),url(fonts/KaTeX_Main-Regular.ttf) format("truetype");font-weight:400;font-style:normal}@font-face{font-family:KaTeX_Math;src:url(fonts/KaTeX_Math-BoldItalic.woff2) format("woff2"),url(fonts/KaTeX_Math-BoldItalic.woff) format("woff"),url(fonts/KaTeX_Math-BoldItalic.ttf) format("truetype");font-weight:700;font-style:italic}@font-face{font-family:KaTeX_Math;src:url(fonts/KaTeX_Math-Italic.woff2) format("woff2"),url(fonts/KaTeX_Math-Italic.woff) format("woff"),url(fonts/KaTeX_Math-Italic.ttf) format("truetype");font-weight:400;font-style:italic}@font-face{font-family:"KaTeX_SansSerif";src:url(fonts/KaTeX_SansSerif-Bold.woff2) format("woff2"),url(fonts/KaTeX_SansSerif-Bold.woff) format("woff"),url(fonts/KaTeX_SansSerif-Bold.ttf) format("truetype");font-weight:700;font-style:normal}@font-face{font-family:"KaTeX_SansSerif";src:url(fonts/KaTeX_SansSerif-Italic.woff2) format("woff2"),url(fonts/KaTeX_SansSerif-Italic.woff) format("woff"),url(fonts/KaTeX_SansSerif-Italic.ttf) format("truetype");font-weight:400;font-style:italic}@font-face{font-family:"KaTeX_SansSerif";src:url(fonts/KaTeX_SansSerif-Regular.woff2) format("woff2"),url(fonts/KaTeX_SansSerif-Regular.woff) format("woff"),url(fonts/KaTeX_SansSerif-Regular.ttf) format("truetype");font-weight:400;font-style:normal}@font-face{font-family:KaTeX_Script;src:url(fonts/KaTeX_Script-Regular.woff2) format("woff2"),url(fonts/KaTeX_Script-Regular.woff) format("woff"),url(fonts/KaTeX_Script-Regular.ttf) format("truetype");font-weight:400;font-style:normal}@font-face{font-family:KaTeX_Size1;src:url(fonts/KaTeX_Size1-Regular.woff2) format("woff2"),url(fonts/KaTeX_Size1-Regular.woff) format("woff"),url(fonts/KaTeX_Size1-Regular.ttf) format("truetype");font-weight:400;font-style:normal}@font-face{font-family:KaTeX_Size2;src:url(fonts/KaTeX_Size2-Regular.woff2) format("woff2"),url(fonts/KaTeX_Size2-Regular.woff) format("woff"),url(fonts/KaTeX_Size2-Regular.ttf) format("truetype");font-weight:400;font-style:normal}@font-face{font-family:KaTeX_Size3;src:url(fonts/KaTeX_Size3-Regular.woff2) format("woff2"),url(fonts/KaTeX_Size3-Regular.woff) format("woff"),url(fonts/KaTeX_Size3-Regular.ttf) format("truetype");font-weight:400;font-style:normal}@font-face{font-family:KaTeX_Size4;src:url(fonts/KaTeX_Size4-Regular.woff2) format("woff2"),url(fonts/KaTeX_Size4-Regular.woff) format("woff"),url(fonts/KaTeX_Size4-Regular.ttf) format("truetype");font-weight:400;font-style:normal}@font-face{font-family:KaTeX_Typewriter;src:url(fonts/KaTeX_Typewriter-Regular.woff2) format("woff2"),url(fonts/KaTeX_Typewriter-Regular.woff) format("woff"),url(fonts/KaTeX_Typewriter-Regular.ttf) format("truetype");font-weight:400;font-style:normal}.katex{font:normal 1.21em KaTeX_Main,Times New Roman,serif;line-height:1.2;text-indent:0;text-rendering:auto;border-color:currentColor}.katex *{-ms-high-contrast-adjust:none!important}.katex .katex-version:after{content:"0.12.0"}.katex .katex-mathml{position:absolute;clip:rect(1px,1px,1px,1px);padding:0;border:0;height:1px;width:1px;overflow:hidden}.katex .katex-html>.newline{display:block}.katex .base{position:relative;white-space:nowrap;width:min-content}.katex .base,.katex .strut{display:inline-block}.katex .textbf{font-weight:700}.katex .textit{font-style:italic}.katex .textrm{font-family:KaTeX_Main}.katex .textsf{font-family:KaTeX_SansSerif}.katex .texttt{font-family:KaTeX_Typewriter}.katex .mathnormal{font-family:KaTeX_Math;font-style:italic}.katex .mathit{font-family:KaTeX_Main;font-style:italic}.katex .mathrm{font-style:normal}.katex .mathbf{font-family:KaTeX_Main;font-weight:700}.katex .boldsymbol{font-family:KaTeX_Math;font-weight:700;font-style:italic}.katex .amsrm,.katex .mathbb,.katex .textbb{font-family:KaTeX_AMS}.katex .mathcal{font-family:KaTeX_Caligraphic}.katex .mathfrak,.katex .textfrak{font-family:KaTeX_Fraktur}.katex .mathtt{font-family:KaTeX_Typewriter}.katex .mathscr,.katex .textscr{font-family:KaTeX_Script}.katex .mathsf,.katex .textsf{font-family:KaTeX_SansSerif}.katex .mathboldsf,.katex .textboldsf{font-family:KaTeX_SansSerif;font-weight:700}.katex .mathitsf,.katex .textitsf{font-family:KaTeX_SansSerif;font-style:italic}.katex .mainrm{font-family:KaTeX_Main;font-style:normal}.katex .vlist-t{display:inline-table;table-layout:fixed;border-collapse:collapse}.katex .vlist-r{display:table-row}.katex .vlist{display:table-cell;vertical-align:bottom;position:relative}.katex .vlist>span{display:block;height:0;position:relative}.katex .vlist>span>span{display:inline-block}.katex .vlist>span>.pstrut{overflow:hidden;width:0}.katex .vlist-t2{margin-right:-2px}.katex .vlist-s{display:table-cell;vertical-align:bottom;font-size:1px;width:2px;min-width:2px}.katex .vbox{-ms-flex-direction:column;flex-direction:column;align-items:baseline}.katex .hbox,.katex .vbox{display:-ms-inline-flexbox;display:inline-flex}.katex .hbox{-ms-flex-direction:row;flex-direction:row;width:100%}.katex .thinbox{display:inline-flex;flex-direction:row;width:0;max-width:0}.katex .msupsub{text-align:left}.katex .mfrac>span>span{text-align:center}.katex .mfrac .frac-line{display:inline-block;width:100%;border-bottom-style:solid}.katex .hdashline,.katex .hline,.katex .mfrac .frac-line,.katex .overline .overline-line,.katex .rule,.katex .underline .underline-line{min-height:1px}.katex .mspace{display:inline-block}.katex .clap,.katex .llap,.katex .rlap{width:0;position:relative}.katex .clap>.inner,.katex .llap>.inner,.katex .rlap>.inner{position:absolute}.katex .clap>.fix,.katex .llap>.fix,.katex .rlap>.fix{display:inline-block}.katex .llap>.inner{right:0}.katex .clap>.inner,.katex .rlap>.inner{left:0}.katex .clap>.inner>span{margin-left:-50%;margin-right:50%}.katex .rule{display:inline-block;border:0 solid;position:relative}.katex .hline,.katex .overline .overline-line,.katex .underline .underline-line{display:inline-block;width:100%;border-bottom-style:solid}.katex .hdashline{display:inline-block;width:100%;border-bottom-style:dashed}.katex .sqrt>.root{margin-left:.27777778em;margin-right:-.55555556em}.katex .fontsize-ensurer.reset-size1.size1,.katex .sizing.reset-size1.size1{font-size:1em}.katex .fontsize-ensurer.reset-size1.size2,.katex .sizing.reset-size1.size2{font-size:1.2em}.katex .fontsize-ensurer.reset-size1.size3,.katex .sizing.reset-size1.size3{font-size:1.4em}.katex .fontsize-ensurer.reset-size1.size4,.katex .sizing.reset-size1.size4{font-size:1.6em}.katex .fontsize-ensurer.reset-size1.size5,.katex .sizing.reset-size1.size5{font-size:1.8em}.katex .fontsize-ensurer.reset-size1.size6,.katex .sizing.reset-size1.size6{font-size:2em}.katex .fontsize-ensurer.reset-size1.size7,.katex .sizing.reset-size1.size7{font-size:2.4em}.katex .fontsize-ensurer.reset-size1.size8,.katex .sizing.reset-size1.size8{font-size:2.88em}.katex .fontsize-ensurer.reset-size1.size9,.katex .sizing.reset-size1.size9{font-size:3.456em}.katex .fontsize-ensurer.reset-size1.size10,.katex .sizing.reset-size1.size10{font-size:4.148em}.katex .fontsize-ensurer.reset-size1.size11,.katex .sizing.reset-size1.size11{font-size:4.976em}.katex .fontsize-ensurer.reset-size2.size1,.katex .sizing.reset-size2.size1{font-size:.83333333em}.katex .fontsize-ensurer.reset-size2.size2,.katex .sizing.reset-size2.size2{font-size:1em}.katex .fontsize-ensurer.reset-size2.size3,.katex .sizing.reset-size2.size3{font-size:1.16666667em}.katex .fontsize-ensurer.reset-size2.size4,.katex .sizing.reset-size2.size4{font-size:1.33333333em}.katex .fontsize-ensurer.reset-size2.size5,.katex .sizing.reset-size2.size5{font-size:1.5em}.katex .fontsize-ensurer.reset-size2.size6,.katex .sizing.reset-size2.size6{font-size:1.66666667em}.katex .fontsize-ensurer.reset-size2.size7,.katex .sizing.reset-size2.size7{font-size:2em}.katex .fontsize-ensurer.reset-size2.size8,.katex .sizing.reset-size2.size8{font-size:2.4em}.katex .fontsize-ensurer.reset-size2.size9,.katex .sizing.reset-size2.size9{font-size:2.88em}.katex .fontsize-ensurer.reset-size2.size10,.katex .sizing.reset-size2.size10{font-size:3.45666667em}.katex .fontsize-ensurer.reset-size2.size11,.katex .sizing.reset-size2.size11{font-size:4.14666667em}.katex .fontsize-ensurer.reset-size3.size1,.katex .sizing.reset-size3.size1{font-size:.71428571em}.katex .fontsize-ensurer.reset-size3.size2,.katex .sizing.reset-size3.size2{font-size:.85714286em}.katex .fontsize-ensurer.reset-size3.size3,.katex .sizing.reset-size3.size3{font-size:1em}.katex .fontsize-ensurer.reset-size3.size4,.katex .sizing.reset-size3.size4{font-size:1.14285714em}.katex .fontsize-ensurer.reset-size3.size5,.katex .sizing.reset-size3.size5{font-size:1.28571429em}.katex .fontsize-ensurer.reset-size3.size6,.katex .sizing.reset-size3.size6{font-size:1.42857143em}.katex .fontsize-ensurer.reset-size3.size7,.katex .sizing.reset-size3.size7{font-size:1.71428571em}.katex .fontsize-ensurer.reset-size3.size8,.katex .sizing.reset-size3.size8{font-size:2.05714286em}.katex .fontsize-ensurer.reset-size3.size9,.katex .sizing.reset-size3.size9{font-size:2.46857143em}.katex .fontsize-ensurer.reset-size3.size10,.katex .sizing.reset-size3.size10{font-size:2.96285714em}.katex .fontsize-ensurer.reset-size3.size11,.katex .sizing.reset-size3.size11{font-size:3.55428571em}.katex .fontsize-ensurer.reset-size4.size1,.katex .sizing.reset-size4.size1{font-size:.625em}.katex .fontsize-ensurer.reset-size4.size2,.katex .sizing.reset-size4.size2{font-size:.75em}.katex .fontsize-ensurer.reset-size4.size3,.katex .sizing.reset-size4.size3{font-size:.875em}.katex .fontsize-ensurer.reset-size4.size4,.katex .sizing.reset-size4.size4{font-size:1em}.katex .fontsize-ensurer.reset-size4.size5,.katex .sizing.reset-size4.size5{font-size:1.125em}.katex .fontsize-ensurer.reset-size4.size6,.katex .sizing.reset-size4.size6{font-size:1.25em}.katex .fontsize-ensurer.reset-size4.size7,.katex .sizing.reset-size4.size7{font-size:1.5em}.katex .fontsize-ensurer.reset-size4.size8,.katex .sizing.reset-size4.size8{font-size:1.8em}.katex .fontsize-ensurer.reset-size4.size9,.katex .sizing.reset-size4.size9{font-size:2.16em}.katex .fontsize-ensurer.reset-size4.size10,.katex .sizing.reset-size4.size10{font-size:2.5925em}.katex .fontsize-ensurer.reset-size4.size11,.katex .sizing.reset-size4.size11{font-size:3.11em}.katex .fontsize-ensurer.reset-size5.size1,.katex .sizing.reset-size5.size1{font-size:.55555556em}.katex .fontsize-ensurer.reset-size5.size2,.katex .sizing.reset-size5.size2{font-size:.66666667em}.katex .fontsize-ensurer.reset-size5.size3,.katex .sizing.reset-size5.size3{font-size:.77777778em}.katex .fontsize-ensurer.reset-size5.size4,.katex .sizing.reset-size5.size4{font-size:.88888889em}.katex .fontsize-ensurer.reset-size5.size5,.katex .sizing.reset-size5.size5{font-size:1em}.katex .fontsize-ensurer.reset-size5.size6,.katex .sizing.reset-size5.size6{font-size:1.11111111em}.katex .fontsize-ensurer.reset-size5.size7,.katex .sizing.reset-size5.size7{font-size:1.33333333em}.katex .fontsize-ensurer.reset-size5.size8,.katex .sizing.reset-size5.size8{font-size:1.6em}.katex .fontsize-ensurer.reset-size5.size9,.katex .sizing.reset-size5.size9{font-size:1.92em}.katex .fontsize-ensurer.reset-size5.size10,.katex .sizing.reset-size5.size10{font-size:2.30444444em}.katex .fontsize-ensurer.reset-size5.size11,.katex .sizing.reset-size5.size11{font-size:2.76444444em}.katex .fontsize-ensurer.reset-size6.size1,.katex .sizing.reset-size6.size1{font-size:.5em}.katex .fontsize-ensurer.reset-size6.size2,.katex .sizing.reset-size6.size2{font-size:.6em}.katex .fontsize-ensurer.reset-size6.size3,.katex .sizing.reset-size6.size3{font-size:.7em}.katex .fontsize-ensurer.reset-size6.size4,.katex .sizing.reset-size6.size4{font-size:.8em}.katex .fontsize-ensurer.reset-size6.size5,.katex .sizing.reset-size6.size5{font-size:.9em}.katex .fontsize-ensurer.reset-size6.size6,.katex .sizing.reset-size6.size6{font-size:1em}.katex .fontsize-ensurer.reset-size6.size7,.katex .sizing.reset-size6.size7{font-size:1.2em}.katex .fontsize-ensurer.reset-size6.size8,.katex .sizing.reset-size6.size8{font-size:1.44em}.katex .fontsize-ensurer.reset-size6.size9,.katex .sizing.reset-size6.size9{font-size:1.728em}.katex .fontsize-ensurer.reset-size6.size10,.katex .sizing.reset-size6.size10{font-size:2.074em}.katex .fontsize-ensurer.reset-size6.size11,.katex .sizing.reset-size6.size11{font-size:2.488em}.katex .fontsize-ensurer.reset-size7.size1,.katex .sizing.reset-size7.size1{font-size:.41666667em}.katex .fontsize-ensurer.reset-size7.size2,.katex .sizing.reset-size7.size2{font-size:.5em}.katex .fontsize-ensurer.reset-size7.size3,.katex .sizing.reset-size7.size3{font-size:.58333333em}.katex .fontsize-ensurer.reset-size7.size4,.katex .sizing.reset-size7.size4{font-size:.66666667em}.katex .fontsize-ensurer.reset-size7.size5,.katex .sizing.reset-size7.size5{font-size:.75em}.katex .fontsize-ensurer.reset-size7.size6,.katex .sizing.reset-size7.size6{font-size:.83333333em}.katex .fontsize-ensurer.reset-size7.size7,.katex .sizing.reset-size7.size7{font-size:1em}.katex .fontsize-ensurer.reset-size7.size8,.katex .sizing.reset-size7.size8{font-size:1.2em}.katex .fontsize-ensurer.reset-size7.size9,.katex .sizing.reset-size7.size9{font-size:1.44em}.katex .fontsize-ensurer.reset-size7.size10,.katex .sizing.reset-size7.size10{font-size:1.72833333em}.katex .fontsize-ensurer.reset-size7.size11,.katex .sizing.reset-size7.size11{font-size:2.07333333em}.katex .fontsize-ensurer.reset-size8.size1,.katex .sizing.reset-size8.size1{font-size:.34722222em}.katex .fontsize-ensurer.reset-size8.size2,.katex .sizing.reset-size8.size2{font-size:.41666667em}.katex .fontsize-ensurer.reset-size8.size3,.katex .sizing.reset-size8.size3{font-size:.48611111em}.katex .fontsize-ensurer.reset-size8.size4,.katex .sizing.reset-size8.size4{font-size:.55555556em}.katex .fontsize-ensurer.reset-size8.size5,.katex .sizing.reset-size8.size5{font-size:.625em}.katex .fontsize-ensurer.reset-size8.size6,.katex .sizing.reset-size8.size6{font-size:.69444444em}.katex .fontsize-ensurer.reset-size8.size7,.katex .sizing.reset-size8.size7{font-size:.83333333em}.katex .fontsize-ensurer.reset-size8.size8,.katex .sizing.reset-size8.size8{font-size:1em}.katex .fontsize-ensurer.reset-size8.size9,.katex .sizing.reset-size8.size9{font-size:1.2em}.katex .fontsize-ensurer.reset-size8.size10,.katex .sizing.reset-size8.size10{font-size:1.44027778em}.katex .fontsize-ensurer.reset-size8.size11,.katex .sizing.reset-size8.size11{font-size:1.72777778em}.katex .fontsize-ensurer.reset-size9.size1,.katex .sizing.reset-size9.size1{font-size:.28935185em}.katex .fontsize-ensurer.reset-size9.size2,.katex .sizing.reset-size9.size2{font-size:.34722222em}.katex .fontsize-ensurer.reset-size9.size3,.katex .sizing.reset-size9.size3{font-size:.40509259em}.katex .fontsize-ensurer.reset-size9.size4,.katex .sizing.reset-size9.size4{font-size:.46296296em}.katex .fontsize-ensurer.reset-size9.size5,.katex .sizing.reset-size9.size5{font-size:.52083333em}.katex .fontsize-ensurer.reset-size9.size6,.katex .sizing.reset-size9.size6{font-size:.5787037em}.katex .fontsize-ensurer.reset-size9.size7,.katex .sizing.reset-size9.size7{font-size:.69444444em}.katex .fontsize-ensurer.reset-size9.size8,.katex .sizing.reset-size9.size8{font-size:.83333333em}.katex .fontsize-ensurer.reset-size9.size9,.katex .sizing.reset-size9.size9{font-size:1em}.katex .fontsize-ensurer.reset-size9.size10,.katex .sizing.reset-size9.size10{font-size:1.20023148em}.katex .fontsize-ensurer.reset-size9.size11,.katex .sizing.reset-size9.size11{font-size:1.43981481em}.katex .fontsize-ensurer.reset-size10.size1,.katex .sizing.reset-size10.size1{font-size:.24108004em}.katex .fontsize-ensurer.reset-size10.size2,.katex .sizing.reset-size10.size2{font-size:.28929605em}.katex .fontsize-ensurer.reset-size10.size3,.katex .sizing.reset-size10.size3{font-size:.33751205em}.katex .fontsize-ensurer.reset-size10.size4,.katex .sizing.reset-size10.size4{font-size:.38572806em}.katex .fontsize-ensurer.reset-size10.size5,.katex .sizing.reset-size10.size5{font-size:.43394407em}.katex .fontsize-ensurer.reset-size10.size6,.katex .sizing.reset-size10.size6{font-size:.48216008em}.katex .fontsize-ensurer.reset-size10.size7,.katex .sizing.reset-size10.size7{font-size:.57859209em}.katex .fontsize-ensurer.reset-size10.size8,.katex .sizing.reset-size10.size8{font-size:.69431051em}.katex .fontsize-ensurer.reset-size10.size9,.katex .sizing.reset-size10.size9{font-size:.83317261em}.katex .fontsize-ensurer.reset-size10.size10,.katex .sizing.reset-size10.size10{font-size:1em}.katex .fontsize-ensurer.reset-size10.size11,.katex .sizing.reset-size10.size11{font-size:1.19961427em}.katex .fontsize-ensurer.reset-size11.size1,.katex .sizing.reset-size11.size1{font-size:.20096463em}.katex .fontsize-ensurer.reset-size11.size2,.katex .sizing.reset-size11.size2{font-size:.24115756em}.katex .fontsize-ensurer.reset-size11.size3,.katex .sizing.reset-size11.size3{font-size:.28135048em}.katex .fontsize-ensurer.reset-size11.size4,.katex .sizing.reset-size11.size4{font-size:.32154341em}.katex .fontsize-ensurer.reset-size11.size5,.katex .sizing.reset-size11.size5{font-size:.36173633em}.katex .fontsize-ensurer.reset-size11.size6,.katex .sizing.reset-size11.size6{font-size:.40192926em}.katex .fontsize-ensurer.reset-size11.size7,.katex .sizing.reset-size11.size7{font-size:.48231511em}.katex .fontsize-ensurer.reset-size11.size8,.katex .sizing.reset-size11.size8{font-size:.57877814em}.katex .fontsize-ensurer.reset-size11.size9,.katex .sizing.reset-size11.size9{font-size:.69453376em}.katex .fontsize-ensurer.reset-size11.size10,.katex .sizing.reset-size11.size10{font-size:.83360129em}.katex .fontsize-ensurer.reset-size11.size11,.katex .sizing.reset-size11.size11{font-size:1em}.katex .delimsizing.size1{font-family:KaTeX_Size1}.katex .delimsizing.size2{font-family:KaTeX_Size2}.katex .delimsizing.size3{font-family:KaTeX_Size3}.katex .delimsizing.size4{font-family:KaTeX_Size4}.katex .delimsizing.mult .delim-size1>span{font-family:KaTeX_Size1}.katex .delimsizing.mult .delim-size4>span{font-family:KaTeX_Size4}.katex .nulldelimiter{display:inline-block;width:.12em}.katex .delimcenter,.katex .op-symbol{position:relative}.katex .op-symbol.small-op{font-family:KaTeX_Size1}.katex .op-symbol.large-op{font-family:KaTeX_Size2}.katex .op-limits>.vlist-t{text-align:center}.katex .accent>.vlist-t{text-align:center}.katex .accent .accent-body{position:relative}.katex .accent .accent-body:not(.accent-full){width:0}.katex .overlay{display:block}.katex .mtable .vertical-separator{display:inline-block;min-width:1px}.katex .mtable .arraycolsep{display:inline-block}.katex .mtable .col-align-c>.vlist-t{text-align:center}.katex .mtable .col-align-l>.vlist-t{text-align:left}.katex .mtable .col-align-r>.vlist-t{text-align:right}.katex .svg-align{text-align:left}.katex svg{display:block;position:absolute;width:100%;height:inherit;fill:currentColor;stroke:currentColor;fill-rule:nonzero;fill-opacity:1;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1}.katex svg path{stroke:none}.katex img{border-style:none;min-width:0;min-height:0;max-width:none;max-height:none}.katex .stretchy{width:100%;display:block;position:relative;overflow:hidden}.katex .stretchy:after,.katex .stretchy:before{content:""}.katex .hide-tail{width:100%;position:relative;overflow:hidden}.katex .halfarrow-left{position:absolute;left:0;width:50.2%;overflow:hidden}.katex .halfarrow-right{position:absolute;right:0;width:50.2%;overflow:hidden}.katex .brace-left{position:absolute;left:0;width:25.1%;overflow:hidden}.katex .brace-center{position:absolute;left:25%;width:50%;overflow:hidden}.katex .brace-right{position:absolute;right:0;width:25.1%;overflow:hidden}.katex .x-arrow-pad{padding:0 .5em}.katex .mover,.katex .munder,.katex .x-arrow{text-align:center}.katex .boxpad{padding:0 .3em}.katex .fbox,.katex .fcolorbox{box-sizing:border-box;border:.04em solid}.katex .cancel-pad{padding:0 .2em}.katex .cancel-lap{margin-left:-.2em;margin-right:-.2em}.katex .sout{border-bottom-style:solid;border-bottom-width:.08em}.katex-display{display:block;margin:1em 0;text-align:center}.katex-display>.katex{display:block;text-align:center;white-space:nowrap}.katex-display>.katex>.katex-html{display:block;position:relative}.katex-display>.katex>.katex-html>.tag{position:absolute;right:0}.katex-display.leqno>.katex>.katex-html>.tag{left:0;right:auto}.katex-display.fleqn>.katex{text-align:left;padding-left:2em}751 </style>752 <meta charset="utf-8">753 <meta content="chrome=1" http-equiv="X-UA-Compatible">754 <meta content="True" name="HandheldFriendly">755 <meta content="320" name="MobileOptimized">756 <meta content="width=device-width, initial-scale=1.0" name="viewport">757 <meta content="no-referrer" name="referrer">758 <meta content="In Bash you can copy the previous command to the system clipboard directly from the command line, and have it be correctly quoted, using759$ echo !!:q | xsel --clipboard This is very useful for sharing or embedding complex commands. Consider this example, with a command that includes quotation marks:760$ echo 'foo bar' foo bar $ echo !!:q | xsel -b echo 'echo '\''foo bar'\''' | xsel -b $ xsel -b echo 'foo bar' The first command, in its entirety, is the command we’re interested in copying." name="description">761 <meta content="Copy command to system clipboard" property="og:title">762 <meta content="In Bash you can copy the previous command to the system clipboard directly from the command line, and have it be correctly quoted, using763$ echo !!:q | xsel --clipboard This is very useful for sharing or embedding complex commands. Consider this example, with a command that includes quotation marks:764$ echo 'foo bar' foo bar $ echo !!:q | xsel -b echo 'echo '\''foo bar'\''' | xsel -b $ xsel -b echo 'foo bar' The first command, in its entirety, is the command we’re interested in copying." property="og:description">765 <meta content="article" property="og:type">766 <meta content="" property="og:url">767 <meta content="2018-05-30T19:09:13+02:00" property="article:published_time">768 <meta content="2018-05-30T19:09:13+02:00" property="article:modified_time">769 <title>770 Copy command to system clipboard771 </title>772 <link href rel="alternate" title="mkjeldsen.gitlab.io" type="application/rss+xml">773 <link crossorigin="anonymous" integrity="sha256-tn6hZ2YGDv0w1/DaFL4MiUoXuAVclrtFZs13ch3TB9M=" rel="stylesheet">774 </head>775 <body lang>776 <section class="header">777 <div class="container">778 <div class="content">779 <nav>780 <ul>781 <li class="nav-home">782 <a>783 <span>784 Home785 </span>786 </a>787 </li>788 <li class="nav-about">789 <a>790 <span>791 About792 </span>793 </a>794 </li>795 </ul>796 </nav>797 </div>798 </div>799 </section>800 <section class="icons">801 <div class="container">802 <div class="content">803 <a href>804 <img alt="rss" class="icon" src="rick.jpg">805 </a>806 </div>807 </div>808 </section>809 <section class="main post non-narrow zero-top-spacing">810 <div class="container">811 <div class="content">812 <div class="front-matter">813 <div class="title-container">814 <h1 class="page-heading">815 Copy command to system clipboard816 </h1>817 </div>818 <div class="meta">819 <div class="date" title="Wed May 30 2018 19:09:13 +0200">820 May 30, 2018821 </div>822 </div>823 </div>824 <div class="markdown">825 <p>826 In Bash you can copy the previous command to the system clipboard directly from827the command line, and have it be correctly quoted, using828 </p>829 <div class="highlight">830 <pre style="color:#d0d0d0;background-color:#202020;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-bash" data-lang="bash">$ <span style="color:#24909d">echo</span> !!:q | xsel --clipboard</code></pre>831 </div>832 <p>833 This is very useful for sharing or embedding complex commands. Consider this834example, with a command that includes quotation marks:835 </p>836 <div class="highlight">837 <pre style="color:#d0d0d0;background-color:#202020;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-bash" data-lang="bash">$ <span style="color:#24909d">echo</span> <span style="color:#ed9d13">'foo bar'</span>838foo bar839$ <span style="color:#24909d">echo</span> !!:q | xsel -b840<span style="color:#24909d">echo</span> <span style="color:#ed9d13">'echo '</span><span style="color:#ed9d13">\'</span><span style="color:#ed9d13">'foo bar'</span><span style="color:#ed9d13">\'</span><span style="color:#ed9d13">''</span> | xsel -b841$ xsel -b842<span style="color:#24909d">echo</span> <span style="color:#ed9d13">'foo bar'</span></code></pre>843 </div>844 <p>845 The first command, in its entirety, is the command we’re interested in copying.846In the second command, the847 <code>848 !!849 </code>850 history expansion851 <em>852 event designator853 </em>854 selects855the previously executed command, and the856 <code>857 q858 </code>859 <em>860 modifier861 </em>862 wraps the command in863quotation marks, escaping characters as necessary. Wrapping the command in864quotation marks turns it into a single argument to the second865 <code>866 echo867 </code>868 , which869pipes it into870 <code>871 xsel872 </code>873 ’s standard input. The final command dumps the contents of874the clipboard875 <em>876 selection877 </em>878 :879 <code>880 echo 'foo bar'881 </code>882 , as desired.883 </p>884 <p>885 You might have886 <a title="xclip man page">887 <code>888 xclip(1)889 </code>890 </a>891 instead of892 <a title="xsel man page">893 <code>894 xsel(1)895 </code>896 </a>897 , in898which case you’ll need to pass different options, and on macOS you will899probably want to use900 <code>901 pbcopy(1)902 </code>903 .904 </p>905 <div class="tags">906 <p>907 <strong>908 Tags:909 </strong>910 <a>911 bash912 </a>913 <a>914 ergonomics915 </a>916 </p>917 </div>918 <p class="back-to-posts">919 <a>920 Back to posts921 </a>922 </p>923 </div>924 <div class="disqus">925 </div>926 </div>927 </div>928 </section>929 </body>930</html>931