1 2<!doctype html> 3<html lang="en" class="no-js"> 4 <head> 5 6 <meta charset="utf-8"> 7 <meta name="viewport" content="width=device-width,initial-scale=1"> 8 9 10 11 <link rel="canonical" href="https://docsforadobe.dev/contributing/style-guide/"> 12 13 14 <link rel="prev" href="../getting-set-up/"> 15 16 17 <link rel="next" href="../other-tips/"> 18 19 20 21 22 23 <link rel="icon" href="../../assets/images/favicon.png"> 24 <meta name="generator" content="mkdocs-1.6.1, mkdocs-material-9.7.6"> 25 26 27 28 <title>Style Guide - docsforadobe.dev</title> 29 30 31 32 <link rel="stylesheet" href="../../assets/stylesheets/main.484c7ddc.min.css"> 33 34 35 <link rel="stylesheet" href="../../assets/stylesheets/palette.ab4e12ef.min.css"> 36 37 38 39 40 41 42 43 44 45 46 47 48 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 49 <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,700,700i%7CRoboto+Mono:400,400i,700,700i&display=fallback"> 50 <style>:root{--md-text-font:"Roboto";--md-code-font:"Roboto Mono"}</style> 51 52 53 54 <link rel="stylesheet" href="../../css/print-site.css"> 55 56 <link rel="stylesheet" href="../../css/print-site-material.css"> 57 58 <link rel="stylesheet" href="../../_static/extra.css"> 59 60 <link rel="stylesheet" href="../../docs/_global/css/global.css"> 61 62 <link rel="stylesheet" href="../../docs/_global/css/global-syntax-highlight.css"> 63 64
64<script>__md_scope=new URL("../..",location),__md_hash=e=>[...e].reduce(((e,_)=>(e<<5)-e+_.charCodeAt(0)),0),__md_get=(e,_=localStorage,t=__md_scope)=>JSON.parse(_.getItem(t.pathname+"."+e)),__md_set=(e,_,t=localStorage,a=__md_scope)=>{try{t.setItem(a.pathname+"."+e,JSON.stringify(_))}catch(e){}}</script>
64 65 66 67 68 69 70 </head> 71 72 73 74 75 76 77 78 79 80 <body dir="ltr" data-md-color-scheme="slate" data-md-color-primary="black" data-md-color-accent="indigo"> 81 82 83 <input class="md-toggle" data-md-toggle="drawer" type="checkbox" id="__drawer" autocomplete="off"> 84 <input class="md-toggle" data-md-toggle="search" type="checkbox" id="__search" autocomplete="off"> 85 <label class="md-overlay" for="__drawer"></label> 86 <div data-md-component="skip"> 87 88 89 <a href="#style-guide" class="md-skip"> 90 Skip to content 91 </a> 92 93 </div> 94 <div data-md-component="announce"> 95 96 <aside class="md-banner"> 97 <div class="md-banner__inner md-grid md-typeset"> 98 99 <button class="md-banner__button md-icon" aria-label="Don't show this again"> 100 101 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg> 102 </button> 103 104 105 Welcome to the new docsforadobe guide! 106 107 This is a work in progress. 108 109 Please provide all feedback via 110 <a ref="me" href="https://github.com/orgs/docsforadobe/discussions"> 111 <span class="twemoji"> 112 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M1.75 1h8.5c.966 0 1.75.784 1.75 1.75v5.5A1.75 1.75 0 0 1 10.25 10H7.061l-2.574 2.573A1.458 1.458 0 0 1 2 11.543V10h-.25A1.75 1.75 0 0 1 0 8.25v-5.5C0 1.784.784 1 1.75 1M1.5 2.75v5.5c0 .138.112.25.25.25h1a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.75.75 0 0 1 .53-.22h3.5a.25.25 0 0 0 .25-.25v-5.5a.25.25 0 0 0-.25-.25h-8.5a.25.25 0 0 0-.25.25m13 2a.25.25 0 0 0-.25-.25h-.5a.75.75 0 0 1 0-1.5h.5c.966 0 1.75.784 1.75 1.75v5.5A1.75 1.75 0 0 1 14.25 12H14v1.543a1.458 1.458 0 0 1-2.487 1.03L9.22 12.28a.749.749 0 0 1 .326-1.275.75.75 0 0 1 .734.215l2.22 2.22v-2.19a.75.75 0 0 1 .75-.75h1a.25.25 0 0 0 .25-.25Z"/></svg> 113 </span> 114 <strong>the org's discussion forum</strong> 115 </a>. 116 117 </div> 118 119
119<script>var el=document.querySelector("[data-md-component=announce]");if(el){var content=el.querySelector(".md-typeset");__md_hash(content.innerHTML)===__md_get("__announce")&&(el.hidden=!0)}</script>
119 120 121 </aside> 122 123 </div> 124 125 126 127 128 129 130<header class="md-header md-header--shadow" data-md-component="header"> 131 <nav class="md-header__inner md-grid" aria-label="Header"> 132 <a href="https://docsforadobe.dev" title="docsforadobe.dev" class="md-header__button md-logo" aria-label="docsforadobe.dev" data-md-component="logo"> 133 134 135 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 8a3 3 0 0 0 3-3 3 3 0 0 0-3-3 3 3 0 0 0-3 3 3 3 0 0 0 3 3m0 3.54C9.64 9.35 6.5 8 3 8v11c3.5 0 6.64 1.35 9 3.54 2.36-2.19 5.5-3.54 9-3.54V8c-3.5 0-6.64 1.35-9 3.54"/></svg> 136 137 </a> 138 <label class="md-header__button md-icon" for="__drawer"> 139 140 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z"/></svg> 141 </label> 142 <div class="md-header__title" data-md-component="header-title"> 143 <div class="md-header__ellipsis"> 144 <div class="md-header__topic"> 145 <span class="md-ellipsis"> 146 docsforadobe.dev 147 </span> 148 </div> 149 <div class="md-header__topic" data-md-component="header-topic"> 150 <span class="md-ellipsis"> 151 152 Style Guide 153 154 </span> 155 </div> 156 </div> 157 </div> 158 159 160 <form class="md-header__option" data-md-component="palette"> 161 162 163 164 165 <input class="md-option" data-md-color-media="(prefers-color-scheme: dark)" data-md-color-scheme="slate" data-md-color-primary="black" data-md-color-accent="indigo" aria-label="Switch to light mode" type="radio" name="__palette" id="__palette_0"> 166 167 <label class="md-header__button md-icon" title="Switch to light mode" for="__palette_1" hidden> 168 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 18c-.89 0-1.74-.2-2.5-.55C11.56 16.5 13 14.42 13 12s-1.44-4.5-3.5-5.45C10.26 6.2 11.11 6 12 6a6 6 0 0 1 6 6 6 6 0 0 1-6 6m8-9.31V4h-4.69L12 .69 8.69 4H4v4.69L.69 12 4 15.31V20h4.69L12 23.31 15.31 20H20v-4.69L23.31 12z"/></svg> 169 </label> 170 171 172 173 174 175 <input class="md-option" data-md-color-media="(prefers-color-scheme: light)" data-md-color-scheme="default" data-md-color-primary="white" data-md-color-accent="indigo" aria-label="Switch to dark mode" type="radio" name="__palette" id="__palette_1"> 176 177 <label class="md-header__button md-icon" title="Switch to dark mode" for="__palette_0" hidden> 178 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 8a4 4 0 0 0-4 4 4 4 0 0 0 4 4 4 4 0 0 0 4-4 4 4 0 0 0-4-4m0 10a6 6 0 0 1-6-6 6 6 0 0 1 6-6 6 6 0 0 1 6 6 6 6 0 0 1-6 6m8-9.31V4h-4.69L12 .69 8.69 4H4v4.69L.69 12 4 15.31V20h4.69L12 23.31 15.31 20H20v-4.69L23.31 12z"/></svg> 179 </label> 180 181 182</form> 183 184 185 186
186<script>var palette=__md_get("__palette");if(palette&&palette.color){if("(prefers-color-scheme)"===palette.color.media){var media=matchMedia("(prefers-color-scheme: light)"),input=document.querySelector(media.matches?"[data-md-color-media='(prefers-color-scheme: light)']":"[data-md-color-media='(prefers-color-scheme: dark)']");palette.color.media=input.getAttribute("data-md-color-media"),palette.color.scheme=input.getAttribute("data-md-color-scheme"),palette.color.primary=input.getAttribute("data-md-color-primary"),palette.color.accent=input.getAttribute("data-md-color-accent")}for(var[key,value]of Object.entries(palette.color))document.body.setAttribute("data-md-color-"+key,value)}</script>
186 187 188 189 190 191 192 <label class="md-header__button md-icon" for="__search"> 193 194 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.52 6.52 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5"/></svg> 195 </label> 196 <div class="md-search" data-md-component="search" role="dialog"> 197 <label class="md-search__overlay" for="__search"></label> 198 <div class="md-search__inner" role="search"> 199 <form class="md-search__form" name="search"> 200 <input type="text" class="md-search__input" name="query" aria-label="Search" placeholder="Search" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" data-md-component="search-query" required> 201 <label class="md-search__icon md-icon" for="__search"> 202 203 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.52 6.52 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5"/></svg> 204 205 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11z"/></svg> 206 </label> 207 <nav class="md-search__options" aria-label="Search"> 208 209 <button type="reset" class="md-search__icon md-icon" title="Clear" aria-label="Clear" tabindex="-1"> 210 211 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg> 212 </button> 213 </nav> 214 215 <div class="md-search__suggest" data-md-component="search-suggest"></div> 216 217 </form> 218 <div class="md-search__output"> 219 <div class="md-search__scrollwrap" tabindex="0" data-md-scrollfix> 220 <div class="md-search-result" data-md-component="search-result"> 221 <div class="md-search-result__meta"> 222 Initializing search 223 </div> 224 <ol class="md-search-result__list" role="presentation"></ol> 225 </div> 226 </div> 227 </div> 228 </div> 229</div> 230 231 232 233 <div class="md-header__source"> 234 <a href="https://github.com/docsforadobe/docsforadobe.dev" title="Go to repository" class="md-source" data-md-component="source"> 235 <div class="md-source__icon md-icon"> 236 237 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2025 Fonticons, Inc.--><path d="M439.6 236.1 244 40.5c-5.4-5.5-12.8-8.5-20.4-8.5s-15 3-20.4 8.4L162.5 81l51.5 51.5c27.1-9.1 52.7 16.8 43.4 43.7l49.7 49.7c34.2-11.8 61.2 31 35.5 56.7-26.5 26.5-70.2-2.9-56-37.3L240.3 199v121.9c25.3 12.5 22.3 41.8 9.1 55-6.4 6.4-15.2 10.1-24.3 10.1s-17.8-3.6-24.3-10.1c-17.6-17.6-11.1-46.9 11.2-56v-123c-20.8-8.5-24.6-30.7-18.6-45L142.6 101 8.5 235.1C3 240.6 0 247.9 0 255.5s3 15 8.5 20.4l195.6 195.7c5.4 5.4 12.7 8.4 20.4 8.4s15-3 20.4-8.4l194.7-194.7c5.4-5.4 8.4-12.8 8.4-20.4s-3-15-8.4-20.4"/></svg> 238 </div> 239 <div class="md-source__repository"> 240 docsforadobe.dev 241 </div> 242</a> 243 </div> 244 245 </nav> 246 247</header> 248 249 <div class="md-container" data-md-component="container"> 250 251 252 253 254 255 256 <main class="md-main" data-md-component="main"> 257 <div class="md-main__inner md-grid"> 258 259 260 261 <div class="md-sidebar md-sidebar--primary" data-md-component="sidebar" data-md-type="navigation" > 262 <div class="md-sidebar__scrollwrap"> 263 <div class="md-sidebar__inner"> 264 265 266 267 268<nav class="md-nav md-nav--primary" aria-label="Navigation" data-md-level="0"> 269 <label class="md-nav__title" for="__drawer"> 270 <a href="https://docsforadobe.dev" title="docsforadobe.dev" class="md-nav__button md-logo" aria-label="docsforadobe.dev" data-md-component="logo"> 271 272 273 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
273<path d="M12 8a3 3 0 0 0 3-3 3 3 0 0 0-3-3 3 3 0 0 0-3 3 3 3 0 0 0 3 3m0 3.54C9.64 9.35 6.5 8 3 8v11c3.5 0 6.64 1.35 9 3.54 2.36-2.19 5.5-3.54 9-3.54V8c-3.5 0-6.64 1.35-9 3.54"/></svg> 274 275 </a> 276 docsforadobe.dev 277 </label> 278 279 <div class="md-nav__source"> 280 <a href="https://github.com/docsforadobe/docsforadobe.dev" title="Go to repository" class="md-source" data-md-component="source"> 281 <div class="md-source__icon md-icon"> 282 283 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2025 Fonticons, Inc.--><path d="M439.6 236.1 244 40.5c-5.4-5.5-12.8-8.5-20.4-8.5s-15 3-20.4 8.4L162.5 81l51.5 51.5c27.1-9.1 52.7 16.8 43.4 43.7l49.7 49.7c34.2-11.8 61.2 31 35.5 56.7-26.5 26.5-70.2-2.9-56-37.3L240.3 199v121.9c25.3 12.5 22.3 41.8 9.1 55-6.4 6.4-15.2 10.1-24.3 10.1s-17.8-3.6-24.3-10.1c-17.6-17.6-11.1-46.9 11.2-56v-123c-20.8-8.5-24.6-30.7-18.6-45L142.6 101 8.5 235.1C3 240.6 0 247.9 0 255.5s3 15 8.5 20.4l195.6 195.7c5.4 5.4 12.7 8.4 20.4 8.4s15-3 20.4-8.4l194.7-194.7c5.4-5.4 8.4-12.8 8.4-20.4s-3-15-8.4-20.4"/></svg> 284 </div> 285 <div class="md-source__repository"> 286 docsforadobe.dev 287 </div> 288</a> 289 </div> 290 291 <ul class="md-nav__list" data-md-scrollfix> 292 293 294 295 296 297 298 299 <li class="md-nav__item"> 300 <a href="../.." class="md-nav__link"> 301 302 303 304 <span class="md-ellipsis"> 305 306 307 Extensibility Directory 308 309 310 311 </span> 312 313 314 315 </a> 316 </li> 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 <li class="md-nav__item md-nav__item--active md-nav__item--nested"> 334 335 336 337 <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_2" checked> 338 339 340 <label class="md-nav__link" for="__nav_2" id="__nav_2_label" tabindex="0"> 341 342 343 344 <span class="md-ellipsis"> 345 346 347 Contributing 348 349 350 351 </span> 352 353 354 355 <span class="md-nav__icon md-icon"></span> 356 </label> 357 358 <nav class="md-nav" data-md-level="1" aria-labelledby="__nav_2_label" aria-expanded="true"> 359 <label class="md-nav__title" for="__nav_2"> 360 <span class="md-nav__icon md-icon"></span> 361 362 363 Contributing 364 365 366 </label> 367 <ul class="md-nav__list" data-md-scrollfix> 368 369 370 371 372 373 374 375 <li class="md-nav__item"> 376 <a href="../contribution-guide/" class="md-nav__link"> 377 378 379 380 <span class="md-ellipsis"> 381 382 383 Contribution Guide 384 385 386 387 </span> 388 389 390 391 </a> 392 </li> 393 394 395 396 397 398 399 400 401 402 403 <li class="md-nav__item"> 404 <a href="../getting-set-up/" class="md-nav__link"> 405 406 407 408 <span class="md-ellipsis"> 409 410 411 Getting Set Up 412 413 414 415 </span> 416 417 418 419 </a> 420 </li> 421 422 423 424 425 426 427 428 429 430 431 432 433 <li class="md-nav__item md-nav__item--active"> 434 435 <input class="md-nav__toggle md-toggle" type="checkbox" id="__toc"> 436 437 438 439 440 441 <label class="md-nav__link md-nav__link--active" for="__toc"> 442 443 444 445 <span class="md-ellipsis"> 446 447 448 Style Guide 449 450 451 452 </span> 453 454 455 456 <span class="md-nav__icon md-icon"></span> 457 </label> 458 459 <a href="./" class="md-nav__link md-nav__link--active"> 460 461 462 463 <span class="md-ellipsis"> 464 465 466 Style Guide 467 468 469 470 </span> 471 472 473 474 </a> 475 476 477 478 479 480<nav class="md-nav md-nav--secondary" aria-label="Page Contents"> 481 482 483 484 485 486 487 <label class="md-nav__title" for="__toc"> 488 <span class="md-nav__icon md-icon"></span> 489 Page Contents 490 </label> 491 <ul class="md-nav__list" data-md-component="toc" data-md-scrollfix> 492 493 <li class="md-nav__item"> 494 <a href="#writing-tips" class="md-nav__link"> 495 <span class="md-ellipsis"> 496 Writing Tips 497 </span> 498 </a> 499 500 <!-- Table of contents list --> 501 502</li> 503 504 <li class="md-nav__item"> 505 <a href="#title-hierarchy" class="md-nav__link"> 506 <span class="md-ellipsis"> 507 Title Hierarchy 508 </span> 509 </a> 510 511 <!-- Table of contents list --> 512 513</li> 514 515 <li class="md-nav__item"> 516 <a href="#element-templating" class="md-nav__link"> 517 <span class="md-ellipsis"> 518 Element Templating 519 </span> 520 </a> 521 522 <!-- Table of contents list --> 523 524 <nav class="md-nav" aria-label="Element Templating"> 525 <ul class="md-nav__list"> 526 527 528 <li class="md-nav__item"> 529 <a href="#class-pages" class="md-nav__link"> 530 <span class="md-ellipsis"> 531 Class Pages 532 </span> 533 </a> 534 535 <!-- Table of contents list --> 536 537</li> 538 539 540 541 <li class="md-nav__item"> 542 <a href="#attributes" class="md-nav__link"> 543 <span class="md-ellipsis"> 544 Attributes 545 </span> 546 </a> 547 548 <!-- Table of contents list --> 549 550</li> 551 552 553 554 <li class="md-nav__item"> 555 <a href="#methods" class="md-nav__link"> 556 <span class="md-ellipsis"> 557 Methods 558 </span> 559 </a> 560 561 <!-- Table of contents list --> 562 563</li> 564 565 566 </ul> 567 </nav> 568 569</li> 570 571 <li class="md-nav__item"> 572 <a href="#tables" class="md-nav__link"> 573 <span class="md-ellipsis"> 574 Tables 575 </span> 576 </a> 577 578 <!-- Table of contents list --> 579 580 <nav class="md-nav" aria-label="Tables"> 581 <ul class="md-nav__list"> 582 583 584 <li class="md-nav__item"> 585 <a href="#simple-tables" class="md-nav__link"> 586 <span class="md-ellipsis"> 587 Simple Tables 588 </span> 589 </a> 590 591 <!-- Table of contents list --> 592 593</li> 594 595 596 597 <li class="md-nav__item"> 598 <a href="#complex-tables" class="md-nav__link"> 599 <span class="md-ellipsis"> 600 Complex Tables 601 </span> 602 </a> 603 604 <!-- Table of contents list --> 605 606</li> 607 608 609 </ul> 610 </nav> 611 612</li> 613 614 <li class="md-nav__item"> 615 <a href="#code-samples" class="md-nav__link"> 616 <span class="md-ellipsis"> 617 Code Samples 618 </span> 619 </a> 620 621 <!-- Table of contents list --> 622 623 <nav class="md-nav" aria-label="Code Samples"> 624 <ul class="md-nav__list"> 625 626 627 <li class="md-nav__item"> 628 <a href="#inline-code" class="md-nav__link"> 629 <span class="md-ellipsis"> 630 Inline code 631 </span> 632 </a> 633 634 <!-- Table of contents list --> 635 636</li> 637 638 639 640 <li class="md-nav__item"> 641 <a href="#code-fences" class="md-nav__link"> 642 <span class="md-ellipsis"> 643 Code fences 644 </span> 645 </a> 646 647 <!-- Table of contents list --> 648 649</li> 650 651 652 653 <li class="md-nav__item"> 654 <a href="#code-fences-within-tables" class="md-nav__link"> 655 <span class="md-ellipsis"> 656 Code fences within tables 657 </span> 658 </a> 659 660 <!-- Table of contents list --> 661 662</li> 663 664 665 </ul> 666 </nav> 667 668</li> 669 670 <li class="md-nav__item"> 671 <a href="#admonitions" class="md-nav__link"> 672 <span class="md-ellipsis"> 673 Admonitions 674 </span> 675 </a> 676 677 <!-- Table of contents list --> 678 679 <nav class="md-nav" aria-label="Admonitions"> 680 <ul class="md-nav__list"> 681 682 683 <li class="md-nav__item"> 684 <a href="#note" class="md-nav__link"> 685 <span class="md-ellipsis"> 686 Note 687 </span> 688 </a> 689 690 <!-- Table of contents list --> 691 692</li> 693 694 695 696 <li class="md-nav__item"> 697 <a href="#tip" class="md-nav__link"> 698 <span class="md-ellipsis"> 699 Tip 700 </span> 701 </a> 702 703 <!-- Table of contents list --> 704 705</li> 706 707 708 709 <li class="md-nav__item"> 710 <a href="#warning" class="md-nav__link"> 711 <span class="md-ellipsis"> 712 Warning 713 </span> 714 </a> 715 716 <!-- Table of contents list --> 717 718</li> 719 720 721 </ul> 722 </nav> 723 724</li> 725 726 </ul> 727 728</nav> 729 730 </li> 731 732 733 734 735 736 737 738 739 740 741 <li class="md-nav__item"> 742 <a href="../other-tips/" class="md-nav__link"> 743 744 745 746 <span class="md-ellipsis"> 747 748 749 Other Tips 750 751 752 753 </span> 754 755 756 757 </a> 758 </li> 759 760 761 762 763 764 765 766 767 768 769 770 771 772 773 774 <li class="md-nav__item md-nav__item--nested"> 775 776 777 778 <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_2_5" > 779 780 781 <label class="md-nav__link" for="__nav_2_5" id="__nav_2_5_label" tabindex="0"> 782 783 784 785 <span class="md-ellipsis"> 786 787 788 Common Components 789 790 791 792 </span> 793 794 795
796 <span class="md-nav__icon md-icon"></span> 797 </label> 798 799 <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_2_5_label" aria-expanded="false"> 800 <label class="md-nav__title" for="__nav_2_5"> 801 <span class="md-nav__icon md-icon"></span> 802 803 804 Common Components 805 806 807 </label> 808 <ul class="md-nav__list" data-md-scrollfix> 809 810 811 812 813 814 815 816 <li class="md-nav__item"> 817 <a href="../common-components/updating-common-components/" class="md-nav__link"> 818 819 820 821 <span class="md-ellipsis"> 822 823 824 Updating Common Components 825 826 827 828 </span> 829 830 831 832 </a> 833 </li> 834 835 836 837 838 839 840 841 842 843 844 <li class="md-nav__item"> 845 <a href="../common-components/extending-common-components/" class="md-nav__link"> 846 847 848 849 <span class="md-ellipsis"> 850 851 852 Extending Common Components 853 854 855 856 </span> 857 858 859 860 </a> 861 </li> 862 863 864 865 866 867 868 869 870 871 872 <li class="md-nav__item"> 873 <a href="../common-components/modifying-common-components/" class="md-nav__link"> 874 875 876 877 <span class="md-ellipsis"> 878 879 880 Modifying Common Components 881 882 883 884 </span> 885 886 887 888 </a> 889 </li> 890 891 892 893 894 </ul> 895 </nav> 896 897 </li> 898 899 900 901 902 </ul> 903 </nav> 904 905 </li> 906 907 908 909 910 911 912 913 914 915 916 917 918 919 920 <li class="md-nav__item md-nav__item--nested"> 921 922 923 924 <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_3" > 925 926 927 <label class="md-nav__link" for="__nav_3" id="__nav_3_label" tabindex="0"> 928 929 930 931 <span class="md-ellipsis"> 932 933 934 Updating Legacy Docs 935 936 937 938 </span> 939 940 941 942 <span class="md-nav__icon md-icon"></span> 943 </label> 944 945 <nav class="md-nav" data-md-level="1" aria-labelledby="__nav_3_label" aria-expanded="false"> 946 <label class="md-nav__title" for="__nav_3"> 947 <span class="md-nav__icon md-icon"></span> 948 949 950 Updating Legacy Docs 951 952 953 </label> 954 <ul class="md-nav__list" data-md-scrollfix> 955 956 957 958 959 960 961 962 <li class="md-nav__item"> 963 <a href="../../updating-legacy-docs/converting-rst-to-md/" class="md-nav__link"> 964 965 966 967 <span class="md-ellipsis"> 968 969 970 Converting .rst to .md 971 972 973 974 </span> 975 976 977 978 </a> 979 </li> 980 981 982 983 984 985 986 987 988 989 990 <li class="md-nav__item"> 991 <a href="../../updating-legacy-docs/deploying-the-docs/" class="md-nav__link"> 992 993 994 995 <span class="md-ellipsis"> 996 997 998 Deploying the docs 999 1000 1001 1002 </span> 1003 1004 1005 1006 </a> 1007 </li> 1008 1009 1010 1011 1012 1013 1014 1015 1016 1017 1018 <li class="md-nav__item"> 1019 <a href="../../updating-legacy-docs/conversion-progress/" class="md-nav__link"> 1020 1021 1022 1023 <span class="md-ellipsis"> 1024 1025 1026 Conversion Progress 1027 1028 1029 1030 </span> 1031 1032 1033 1034 </a> 1035 </li> 1036 1037 1038 1039 1040 </ul> 1041 </nav> 1042 1043 </li> 1044 1045 1046 1047 </ul> 1048</nav> 1049 </div> 1050 </div> 1051 </div> 1052 1053 1054 1055 <div class="md-sidebar md-sidebar--secondary" data-md-component="sidebar" data-md-type="toc" > 1056 <div class="md-sidebar__scrollwrap"> 1057 <div class="md-sidebar__inner"> 1058 1059 1060 1061 1062<nav class="md-nav md-nav--secondary" aria-label="Page Contents"> 1063 1064 1065 1066 1067 1068 1069 <label class="md-nav__title" for="__toc"> 1070 <span class="md-nav__icon md-icon"></span> 1071 Page Contents 1072 </label> 1073 <ul class="md-nav__list" data-md-component="toc" data-md-scrollfix> 1074 1075 <li class="md-nav__item"> 1076 <a href="#writing-tips" class="md-nav__link"> 1077 <span class="md-ellipsis"> 1078 Writing Tips 1079 </span> 1080 </a> 1081 1082 <!-- Table of contents list --> 1083 1084</li> 1085 1086 <li class="md-nav__item"> 1087 <a href="#title-hierarchy" class="md-nav__link"> 1088 <span class="md-ellipsis"> 1089 Title Hierarchy 1090 </span> 1091 </a> 1092 1093 <!-- Table of contents list --> 1094 1095</li> 1096 1097 <li class="md-nav__item"> 1098 <a href="#element-templating" class="md-nav__link"> 1099 <span class="md-ellipsis"> 1100 Element Templating 1101 </span> 1102 </a> 1103 1104 <!-- Table of contents list --> 1105 1106 <nav class="md-nav" aria-label="Element Templating"> 1107 <ul class="md-nav__list"> 1108 1109 1110 <li class="md-nav__item"> 1111 <a href="#class-pages" class="md-nav__link"> 1112 <span class="md-ellipsis"> 1113 Class Pages 1114 </span> 1115 </a> 1116 1117 <!-- Table of contents list --> 1118 1119</li> 1120 1121 1122 1123 <li class="md-nav__item"> 1124 <a href="#attributes" class="md-nav__link"> 1125 <span class="md-ellipsis"> 1126 Attributes 1127 </span> 1128 </a> 1129 1130 <!-- Table of contents list --> 1131 1132</li> 1133 1134 1135 1136 <li class="md-nav__item"> 1137 <a href="#methods" class="md-nav__link"> 1138 <span class="md-ellipsis"> 1139 Methods 1140 </span> 1141 </a> 1142 1143 <!-- Table of contents list --> 1144 1145</li> 1146 1147 1148 </ul> 1149 </nav> 1150 1151</li> 1152 1153 <li class="md-nav__item"> 1154 <a href="#tables" class="md-nav__link"> 1155 <span class="md-ellipsis"> 1156 Tables 1157 </span> 1158 </a> 1159 1160 <!-- Table of contents list --> 1161 1162 <nav class="md-nav" aria-label="Tables"> 1163 <ul class="md-nav__list"> 1164 1165 1166 <li class="md-nav__item"> 1167 <a href="#simple-tables" class="md-nav__link"> 1168 <span class="md-ellipsis"> 1169 Simple Tables 1170 </span> 1171 </a> 1172 1173 <!-- Table of contents list --> 1174 1175</li> 1176 1177 1178 1179 <li class="md-nav__item"> 1180 <a href="#complex-tables" class="md-nav__link"> 1181 <span class="md-ellipsis"> 1182 Complex Tables 1183 </span> 1184 </a> 1185 1186 <!-- Table of contents list --> 1187 1188</li> 1189 1190 1191 </ul> 1192 </nav> 1193 1194</li> 1195 1196 <li class="md-nav__item"> 1197 <a href="#code-samples" class="md-nav__link"> 1198 <span class="md-ellipsis"> 1199 Code Samples 1200 </span> 1201 </a> 1202 1203 <!-- Table of contents list --> 1204 1205 <nav class="md-nav" aria-label="Code Samples"> 1206 <ul class="md-nav__list"> 1207 1208 1209 <li class="md-nav__item"> 1210 <a href="#inline-code" class="md-nav__link"> 1211 <span class="md-ellipsis"> 1212 Inline code 1213 </span> 1214 </a> 1215 1216 <!-- Table of contents list --> 1217 1218</li> 1219 1220 1221 1222 <li class="md-nav__item"> 1223 <a href="#code-fences" class="md-nav__link"> 1224 <span class="md-ellipsis"> 1225 Code fences 1226 </span> 1227 </a> 1228 1229 <!-- Table of contents list --> 1230 1231</li> 1232 1233 1234 1235 <li class="md-nav__item"> 1236 <a href="#code-fences-within-tables" class="md-nav__link"> 1237 <span class="md-ellipsis"> 1238 Code fences within tables 1239 </span> 1240 </a> 1241 1242 <!-- Table of contents list --> 1243 1244</li> 1245 1246 1247 </ul> 1248 </nav> 1249 1250</li> 1251 1252 <li class="md-nav__item"> 1253 <a href="#admonitions" class="md-nav__link"> 1254 <span class="md-ellipsis"> 1255 Admonitions 1256 </span> 1257 </a> 1258 1259 <!-- Table of contents list --> 1260 1261 <nav class="md-nav" aria-label="Admonitions"> 1262 <ul class="md-nav__list"> 1263 1264 1265 <li class="md-nav__item"> 1266 <a href="#note" class="md-nav__link"> 1267 <span class="md-ellipsis"> 1268 Note 1269 </span> 1270 </a> 1271 1272 <!-- Table of contents list --> 1273 1274</li> 1275 1276 1277 1278 <li class="md-nav__item"> 1279 <a href="#tip" class="md-nav__link"> 1280 <span class="md-ellipsis"> 1281 Tip 1282 </span> 1283 </a> 1284 1285 <!-- Table of contents list --> 1286 1287</li> 1288 1289 1290 1291 <li class="md-nav__item"> 1292 <a href="#warning" class="md-nav__link"> 1293 <span class="md-ellipsis"> 1294 Warning 1295 </span> 1296 </a> 1297 1298 <!-- Table of contents list --> 1299 1300</li> 1301 1302 1303 </ul> 1304 </nav> 1305 1306</li> 1307 1308 </ul> 1309 1310</nav> 1311 </div> 1312 </div> 1313 </div> 1314 1315 1316 1317 <div class="md-content" data-md-component="content"> 1318 1319 <article class="md-content__inner md-typeset"> 1320 1321 1322 1323 1324 1325 <a href="https://github.com/docsforadobe/docsforadobe.dev/edit/master/docs/contributing/style-guide.md" title="Edit this page" class="md-content__button md-icon" rel="edit"> 1326 1327 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
1327<path d="M10 20H6V4h7v5h5v3.1l2-2V8l-6-6H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h4zm10.2-7c.1 0 .3.1.4.2l1.3 1.3c.2.2.2.6 0 .8l-1 1-2.1-2.1 1-1c.1-.1.2-.2.4-.2m0 3.9L14.1 23H12v-2.1l6.1-6.1z"/></svg> 1328 </a> 1329 1330 1331 1332 1333 1334 <a href="https://github.com/docsforadobe/docsforadobe.dev/raw/master/docs/contributing/style-guide.md" title="View source of this page" class="md-content__button md-icon"> 1335 1336 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M17 18c.56 0 1 .44 1 1s-.44 1-1 1-1-.44-1-1 .44-1 1-1m0-3c-2.73 0-5.06 1.66-6 4 .94 2.34 3.27 4 6 4s5.06-1.66 6-4c-.94-2.34-3.27-4-6-4m0 6.5a2.5 2.5 0 0 1-2.5-2.5 2.5 2.5 0 0 1 2.5-2.5 2.5 2.5 0 0 1 2.5 2.5 2.5 2.5 0 0 1-2.5 2.5M9.27 20H6V4h7v5h5v4.07c.7.08 1.36.25 2 .49V8l-6-6H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h4.5a8.2 8.2 0 0 1-1.23-2"/></svg> 1337 </a> 1338 1339 1340 1341<h1 id="style-guide">Style Guide<a class="headerlink" href="#style-guide" title="Permanent link">¶</a></h1> 1342<p>These guides are primarily written in plain, vanilla markdown. With that said, in order to maintain a consistent experience across docs, we require contributors to adhere to some opinionated decisions.</p> 1343<p>In addition, we <em>are</em> making use of some specific features & syntax decisions introduced by the current rendering framework being used (<a href="https://www.mkdocs.org/">MkDocs</a> for the engine, <a href="https://squidfunk.github.io/mkdocs-material/">Material for MkDocs</a> for the theme base).</p> 1344<p>This page serves to clarify some of these decisions, as well as specific tips and workflows for ensuring consistency.</p> 1345<div class="admonition note"> 1346<p class="admonition-title">Note</p> 1347<p>If anything is unclear or should be re-evaluated, please open a ticket or discussion post in the <a href="https://github.com/docsforadobe/">Github org</a>.</p> 1348</div> 1349<hr /> 1350<h2 id="writing-tips">Writing Tips<a class="headerlink" href="#writing-tips" title="Permanent link">¶</a></h2> 1351<ul> 1352<li><strong>Do not manually insert linebreaks</strong>! Let the text be long; it will wrap as necessary upon render.</li> 1353<li>Any indented blocks <strong>require four spaces</strong> in order to properly nest. This applies to lists, admonitions, nested content blocks, and more. Four spaces!</li> 1354<li>As frequently as possible, <strong>add crosslinks in the guides</strong>!<ul> 1355<li>If an attribute returns an object that's also documented, adding in a crosslink from the attribute's "type" to the other object's page greatly improves the user experience in these guides.</li> 1356</ul> 1357</li> 1358</ul> 1359<hr /> 1360<h2 id="title-hierarchy">Title Hierarchy<a class="headerlink" href="#title-hierarchy" title="Permanent link">¶</a></h2> 1361<p>The below is the most common general structure, though of course will depend on any specific guide or page's needs.</p> 1362<div class="language-md highlight"><pre><span></span><code><span id="__span-0-1"><span class="gh"># Page</span> 1363</span><span id="__span-0-2"><span class="gu">## Category ("Attributes", "Methods")</span> 1364</span><span id="__span-0-3"><span class="gu">### Attribute/Method Name ("CharacterRange.characterEnd")</span> 1365</span><span id="__span-0-4"><span class="gu">#### Info Header ("Description", "Type", "Parameters", "Returns")</span> 1366</span></code></pre></div> 1367<hr /> 1368<h2 id="element-templating">Element Templating<a class="headerlink" href="#element-templating" title="Permanent link">¶</a></h2> 1369<p>Typically, we try to ensure consistency between all Class pages across the docs, and between all Attributes and Methods.</p> 1370<h3 id="class-pages">Class Pages<a class="headerlink" href="#class-pages" title="Permanent link">¶</a></h3> 1371<p>These should broadly be structured following the below template. Note that not all page elements may apply, or some other page elements may be added as needed.</p> 1372<p>Note that depending on the specific page format, the 'depth' of each title (as far as number of <code>#</code>) may change.</p> 1373<div class="tabbed-set tabbed-alternate" data-tabs="1:2"><input checked="checked" id="__tabbed_1_1" name="__tabbed_1" type="radio" /><input id="__tabbed_1_2" name="__tabbed_1" type="radio" /><div class="tabbed-labels"><label for="__tabbed_1_1">Template</label><label for="__tabbed_1_2">Sample</label></div> 1374<div class="tabbed-content"> 1375<div class="tabbed-block"> 1376<div class="language-md highlight"><pre><span></span><code><span id="__span-1-1"><span class="gh"># Page Title</span> 1377</span><span id="__span-1-2"> 1378</span><span id="__span-1-3"><span class="sb">`sample.call`</span> 1379</span><span id="__span-1-4"> 1380</span><span id="__span-1-5"><span class="gu">#### Description</span> 1381</span><span id="__span-1-6"> 1382</span><span id="__span-1-7">Description of this class 1383</span><span id="__span-1-8"> 1384</span><span id="__span-1-9"><span class="gu">#### Example</span> 1385</span><span id="__span-1-10"> 1386</span><span id="__span-1-11">Class-wide example(s), if applicable 1387</span><span id="__span-1-12"> 1388</span><span id="__span-1-13">--- 1389</span><span id="__span-1-14"> 1390</span><span id="__span-1-15"><span class="gu">## Attributes</span> 1391</span><span id="__span-1-16"> 1392</span><span id="__span-1-17">{ list of attributes } 1393</span><span id="__span-1-18"> 1394</span><span id="__span-1-19">--- 1395</span><span id="__span-1-20"> 1396</span><span id="__span-1-21"><span class="gu">## Methods</span> 1397</span><span id="__span-1-22"> 1398</span><span id="__span-1-23">{ list of attributes } 1399</span></code></pre></div> 1400</div> 1401<div class="tabbed-block"> 1402<div class="language-md highlight"><pre><span></span><code><span id="__span-2-1"><span class="gh"># Layer object</span> 1403</span><span id="__span-2-2"> 1404</span><span id="__span-2-3"><span class="sb">`app.project.item(index).layer(index)`</span> 1405</span><span id="__span-2-4"> 1406</span><span id="__span-2-5"><span class="gu">#### Description</span> 1407</span><span id="__span-2-6"> 1408</span><span id="__span-2-7">The Layer object provides access to layers within compositions. It can be accessed from an item'
1408s layer collection either by index number or by a name string. 1409</span><span id="__span-2-8"> 1410</span><span id="__span-2-9"><span class="gu">#### Example</span> 1411</span><span id="__span-2-10"> 1412</span><span id="__span-2-11">If the first item in the project is a [<span class="nt">CompItem</span>](<span class="na">../item/compitem.md</span>), this example disables the first layer in that composition and renames it. This might, for example, turn an icon off in the composition. 1413</span><span id="__span-2-12"> 1414</span><span id="__span-2-13"><span class="sb">`var layer = app.project.item(1).layer(1);`</span> 1415</span><span id="__span-2-14"> 1416</span><span id="__span-2-15">--- 1417</span><span id="__span-2-16"> 1418</span><span id="__span-2-17"><span class="gu">## Attributes</span> 1419</span><span id="__span-2-18"> 1420</span><span id="__span-2-19">--- 1421</span><span id="__span-2-20"> 1422</span><span id="__span-2-21"><span class="gu">## Methods</span> 1423</span></code></pre></div> 1424</div> 1425</div> 1426</div> 1427<h3 id="attributes">Attributes<a class="headerlink" href="#attributes" title="Permanent link">¶</a></h3> 1428<p>In this context, attributes are synonymous with object properties. (ie <code>class.attribute</code>, e.g. <code>layer.name</code>).</p> 1429<p>The base attribute template should look similar to:</p> 1430<div class="tabbed-set tabbed-alternate" data-tabs="2:2"><input checked="checked" id="__tabbed_2_1" name="__tabbed_2" type="radio" /><input id="__tabbed_2_2" name="__tabbed_2" type="radio" /><div class="tabbed-labels"><label for="__tabbed_2_1">Template</label><label for="__tabbed_2_2">Sample</label></div> 1431<div class="tabbed-content"> 1432<div class="tabbed-block"> 1433<div class="language-md highlight"><pre><span></span><code><span id="__span-3-1"><span class="gu">### Class.attributeName</span> 1434</span><span id="__span-3-2"> 1435</span><span id="__span-3-3"><span class="sb">`sample.attribute.call`</span> 1436</span><span id="__span-3-4"> 1437</span><span id="__span-3-5"><span class="gu">#### Description</span> 1438</span><span id="__span-3-6"> 1439</span><span id="__span-3-7">Attribute description 1440</span><span id="__span-3-8"> 1441</span><span id="__span-3-9"><span class="gu">#### Type</span> 1442</span><span id="__span-3-10"> 1443</span><span id="__span-3-11">Property Type. { Read-only, if applicable. } 1444</span><span id="__span-3-12"> 1445</span><span id="__span-3-13">{ If enum, list possible options. } 1446</span><span id="__span-3-14">{ If an object, create a table of object properties. } 1447</span></code></pre></div> 1448</div> 1449<div class="tabbed-block"> 1450<div class="language-md highlight"><pre><span></span><code><span id="__span-4-1"><span class="gu">### Layer.autoOrient</span> 1451</span><span id="__span-4-2"> 1452</span><span id="__span-4-3"><span class="sb">`app.project.item(index).layer(index).autoOrient`</span> 1453</span><span id="__span-4-4"> 1454</span><span id="__span-4-5"><span class="gu">#### Description</span> 1455</span><span id="__span-4-6"> 1456</span><span id="__span-4-7">The type of automatic orientation to perform for the layer. 1457</span><span id="__span-4-8"> 1458</span><span id="__span-4-9"><span class="gu">#### Type</span> 1459</span><span id="__span-4-10"> 1460</span><span id="__span-4-11">An <span class="sb">`AutoOrientType`</span> enumerated value; read/write. One of: 1461</span><span id="__span-4-12"> 1462</span><span id="__span-4-13"><span class="k">-</span><span class="w"> </span><span class="sb">`AutoOrientType.ALONG_PATH`</span> Layer faces in the direction of the motion path. 1463</span><span id="__span-4-14"><span class="k">-</span><span class="w"> </span><span class="sb">`AutoOrientType.CAMERA_OR_POINT_OF_INTEREST`</span> Layer always faces the active camera or points at its point of interest. 1464</span><span id="__span-4-15"><span class="k">-</span><span class="w"> </span><span class="sb">`AutoOrientType.CHARACTERS_TOWARD_CAMERA`</span> Each character in a per-character 3D text layer automatically faces the active camera. 1465</span><span id="__span-4-16"><span class="k">-</span><span class="w"> </span><span class="sb">`AutoOrientType.NO_AUTO_ORIENT`</span> Layer rotates freely, independent of any motion path, point of interest, or other layers. 1466</span></code></pre></div> 1467</div> 1468</div> 1469</div> 1470<h3 id="methods">Methods<a class="headerlink" href="#methods" title="Permanent link">¶</a></h3> 1471<p>Methods are formatted similarly to attributes, with two primary differences:</p> 1472<ul> 1473<li>The addition of the <code>Parameters</code> section, including a table of parameters</li> 1474<li>The use of <code>Returns</code> in lieu of <code>Type</code> for the method's returned type.</li> 1475</ul> 1476<p>For all parameters & property tables, <strong>please include the type of each parameter / property!</strong></p> 1477<div class="tabbed-set tabbed-alternate" data-tabs="3:2"><input checked="checked" id="__tabbed_3_1" name="__tabbed_3" type="radio" /><input id="__tabbed_3_2" name="__tabbed_3" type="radio" /><div class="tabbed-labels"><label for="__tabbed_3_1">Template</label><label for="__tabbed_3_2">Sample</label></div> 1478<div class="tabbed-content"> 1479<div class="tabbed-block"> 1480<div class="language-md highlight"><pre><span></span><code><span id="__span-5-1"><span class="gu">### Class.methodName()</span> 1481</span><span id="__span-5-2"> 1482</span><span id="__span-5-3"><span class="sb">`sample.method.call()`</span> 1483</span><span id="__span-5-4"> 1484</span><span id="__span-5-5"><span class="gu">#### Description</span> 1485</span><span id="__span-5-6"> 1486</span><span id="__span-5-7">Method description 1487</span><span id="__span-5-8"> 1488</span><span id="__span-5-9"><span class="gu">#### Parameters { If applicable }</span> 1489</span><span id="__span-5-10"> 1490</span><span id="__span-5-11">| Parameter | Type | Description | 1491</span><span id="__span-5-12">| --------------- | --------- | ----------- | 1492</span><span id="__span-5-13">| <span class="sb">`parameterName`</span> | Item type | Description | 1493</span><span id="__span-5-14"> 1494</span><span id="__span-5-15"><span class="gu">#### Returns</span> 1495</span><span id="__span-5-16"> 1496</span><span id="__span-5-17">Property Type. 1497</span><span id="__span-5-18"> 1498</span><span id="__span-5-19">{ If enum, list possible options. } 1499</span><span id="__span-5-20">{ If an object, create a table of object properties. } 1500</span></code></pre></div> 1501</div> 1502<div class="tabbed-block"> 1503<div class="language-md highlight"><pre><span></span><code><span id="__span-6-1"><span class="gu">### Layer.activeAtTime()</span> 1504</span><span id="__span-6-2"> 1505</span><span id="__span-6-3"><span class="sb">`app.project.item(index).layer(index).activeAtTime(time)`</span> 1506</span><span id="__span-6-4"> 1507</span><span id="__span-6-5"><span class="gu">#### Description</span> 1508</span><span id="__span-6-6"> 1509</span><span id="__span-6-7">Returns <span class="sb">`true`</span> if this layer will be active at the specified time. 1510</span><span id="__span-6-8"> 1511</span><span id="__span-6-9">To return <span class="sb">`true`</span>, the layer must be enabled, no other layer may be soloing unless this layer is soloed too, and the time must be between the <span class="sb">`inPoint`</span> and <span class="sb">`outPoint`</span> values of this layer. 1512</span><span id="__span-6-10"> 1513</span><span id="__span-6-11"><span class="gu">#### Parameters</span> 1514</span><span id="__span-6-12"> 1515</span><span id="__span-6-13">| Parameter | Type | Description | 1516</span><span id="__span-6-14">| --------- | -------------------- | -------------------- | 1517</span><span id="__span-6-15">| <span class="sb">`time`</span> | Floating-point value | The time in seconds. | 1518</span><span id="__span-6-16"> 1519</span><span id="__span-6-17"><span class="gu">#### Returns</span> 1520</span><span id="__span-6-18"> 1521</span><span id="__span-6-19">Boolean. 1522</span></code></pre></div> 1523</div> 1524</div> 1525</div> 1526<hr /> 1527<h2 id="tables">Tables<a class="headerlink" href="#tables" title="Permanent link">¶</a></h2> 1528<p>A large part of all of these guides are tables. Due to the various complexities within these guides, we'll be using two different styles of tables– what we're calling "simple" (standard markdown tables) and "complex" (markdown grid tables).</p> 1529<h3 id="simple-tables">Simple Tables<a class="headerlink" href="#simple-tables" title="Permanent link">¶</a></h3> 1530<p>These are to be used in cases where we <em>don't</em> require any complicated, nested content – when there's simple text formatting, one line of text, and when we <em>don't</em> need linebreaks, lists, admonitions, etc.</p> 1531<p>Those tables look generally like this (though any vanilla table syntax is acceptable to use, such as alignment options):</p> 1532<div class="tabbed-set tabbed-alternate" data-tabs="4:2"><input checked="checked" id="__tabbed_4_1" name="__tabbed_4" type="radio" /><input id="__tabbed_4_2" name="__tabbed_4" type="radio" /><div class="tabbed-labels"><label for="__tabbed_4_1">Rendered</label><label for="__tabbed_4_2">Markdown</label></div> 1533<div class="tabbed-content"> 1534<div class="tabbed-block"> 1535<table> 1536<thead> 1537<tr> 1538<th>Header 1</th> 1539<th>Header 2</th> 1540<th style="text-align: right;">Header 3</th> 1541</tr> 1542</thead> 1543<tbody> 1544<tr> 1545<td><code>foo</code></td> 1546<td>bar</td> 1547<td style="text-align: right;">0.00</td> 1548</tr> 1549<tr> 1550<td><code>bar</code></td> 1551<td>foo</td> 1552<td style="text-align: right;">100.00</td> 1553</tr> 1554</tbody> 1555</table> 1556</div> 1557<div class="tabbed-block"> 1558<div class="language-text highlight"><pre><span></span><code><span id="__span-7-1">| Header 1 | Header 2 | Header 3 | 1559</span><span id="__span-7-2">| -------- | -------- | -------: | 1560</span><span id="__span-7-3">| `foo` | bar | 0.00 | 1561</span><span id="__span-7-4">| `bar` | foo | 100.00 | 1562</span></code></pre></div> 1563</div> 1564</div> 1565</div> 1566<h3 id="complex-tables">Complex Tables<a class="headerlink" href="#complex-tables" title="Permanent link">¶</a></h3> 1567<p>
1567When we want to include more info within a given row or column– think nested lists, line breaks, admonitions, etc– we'll be using these "grid tables".</p> 1568<div class="admonition info"> 1569<p class="admonition-title">Info</p> 1570<p>See <a href="https://github.com/docsforadobe/docsforadobe.dev/issues/7">this repo issue</a> for more info and examples.</p> 1571</div> 1572<p>They differ in both syntax (as you'll see below), but also in that they require a divider <em>between every row</em>. You'll also need to ensure they're properly formatted (pipes aligned, etc) in order to render properly.</p> 1573<div class="tabbed-set tabbed-alternate" data-tabs="5:2"><input checked="checked" id="__tabbed_5_1" name="__tabbed_5" type="radio" /><input id="__tabbed_5_2" name="__tabbed_5" type="radio" /><div class="tabbed-labels"><label for="__tabbed_5_1">Rendered</label><label for="__tabbed_5_2">Markdown</label></div> 1574<div class="tabbed-content"> 1575<div class="tabbed-block"> 1576<table> 1577<thead> 1578<tr> 1579<th colspan="1" rowspan="1"> 1580<p>Title A</p> 1581</th> 1582<th colspan="1" rowspan="1"> 1583<p>Title B</p> 1584</th> 1585</tr> 1586</thead> 1587<tbody> 1588<tr> 1589<td colspan="1" rowspan="1"> 1590<p>Item 1.A<br /> 1591<br /> 1592</p> 1593</td> 1594<td colspan="1" rowspan="1"> 1595<p>Item 1.B<br /> 1596<br /> 1597Item 1.B Line 2</p> 1598</td> 1599</tr> 1600<tr> 1601<td colspan="1" rowspan="1"> 1602<p>Item 2.A<br /> 1603</p> 1604</td> 1605<td colspan="1" rowspan="1"> 1606<ul> 1607<li>Item 2.B </li> 1608<li>Item 2.B</li> 1609</ul> 1610</td> 1611</tr> 1612<tr> 1613<td colspan="1" rowspan="1"> 1614<p>Item 3.A<br /> 1615<br /> 1616<br /> 1617</p> 1618</td> 1619<td colspan="1" rowspan="1"> 1620<p>Item 3.B<br /> 1621</p> 1622<div class="admonition warning"> 1623<p class="admonition-title">Warning</p> 1624<p>Deprecated</p> 1625</div> 1626</td> 1627</tr> 1628</tbody> 1629</table> 1630</div> 1631<div class="tabbed-block"> 1632<div class="language-text highlight"><pre><span></span><code><span id="__span-8-1">+----------+-----------------+ 1633</span><span id="__span-8-2">| Title A | Title B | 1634</span><span id="__span-8-3">+==========+=================+ 1635</span><span id="__span-8-4">| Item 1.A | Item 1.B | 1636</span><span id="__span-8-5">| | | 1637</span><span id="__span-8-6">| | Item 1.B Line 2 | 1638</span><span id="__span-8-7">+----------+-----------------+ 1639</span><span id="__span-8-8">| Item 2.A | - Item 2.B | 1640</span><span id="__span-8-9">| | - Item 2.B | 1641</span><span id="__span-8-10">+----------+-----------------+ 1642</span><span id="__span-8-11">| Item 3.A | Item 3.B | 1643</span><span id="__span-8-12">| | | 1644</span><span id="__span-8-13">| | !!! warning | 1645</span><span id="__span-8-14">| | Deprecated | 1646</span><span id="__span-8-15">+----------+-----------------+ 1647</span></code></pre></div> 1648</div> 1649</div> 1650</div> 1651<hr /> 1652<h2 id="code-samples">Code Samples<a class="headerlink" href="#code-samples" title="Permanent link">¶</a></h2> 1653<p>There are three different contexts under which we'll be displaying code (or: wanting text to render as monospaced code).</p> 1654<h3 id="inline-code">Inline code<a class="headerlink" href="#inline-code" title="Permanent link">¶</a></h3> 1655<p>Typically, this is only used for quick, throwaway samples (or to identify something <em>as</em> code, or a variable name).</p> 1656<div class="tabbed-set tabbed-alternate" data-tabs="6:2"><input checked="checked" id="__tabbed_6_1" name="__tabbed_6" type="radio" /><input id="__tabbed_6_2" name="__tabbed_6" type="radio" /><div class="tabbed-labels"><label for="__tabbed_6_1">Rendered</label><label for="__tabbed_6_2">Markdown</label></div> 1657<div class="tabbed-content"> 1658<div class="tabbed-block"> 1659<p>An example would be when discussing a boolean returning <code>true</code> in one case, <code>false</code> in another.</p> 1660<p>Or, in the description of an attribute, that you can access something by using <code>Comp.layer(1)</code> – very simple samples.</p> 1661</div> 1662<div class="tabbed-block"> 1663<div class="language-text highlight"><pre><span></span><code><span id="__span-9-1">An example would be when discussing a boolean returning `true` in one case, `false` in another. 1664</span><span id="__span-9-2"> 1665</span><span id="__span-9-3">Or, in the description of an attribute, that you can access something by using `Comp.layer(1)` – very simple samples. 1666</span></code></pre></div> 1667</div> 1668</div> 1669</div> 1670<h3 id="code-fences">Code fences<a class="headerlink" href="#code-fences" title="Permanent link">¶</a></h3> 1671<p>These are most often used for longer, more fleshed-out code samples.</p> 1672<p>Always include a language in the code fence description (so that the renderer can properly syntax highlight the code).</p> 1673<div class="tabbed-set tabbed-alternate" data-tabs="7:2"><input checked="checked" id="__tabbed_7_1" name="__tabbed_7" type="radio" /><input id="__tabbed_7_2" name="__tabbed_7" type="radio" /><div class="tabbed-labels"><label for="__tabbed_7_1">Rendered</label><label for="__tabbed_7_2">Markdown</label></div> 1674<div class="tabbed-content"> 1675<div class="tabbed-block"> 1676<div class="language-javascript highlight"><pre><span></span><code><span id="__span-10-1"><span class="kd">function</span><span class="w"> </span><span class="nx">err</span><span class="p">(</span><span class="nx">errString</span><span class="p">)</span><span class="w"> </span><span class="p">{</span> 1677</span><span id="__span-10-2"><span class="w"> </span><span class="nx">alert</span><span class="p">(</span><span class="nx">errString</span><span class="p">)</span><span class="w"> </span><span class="p">;</span> 1678</span><span id="__span-10-3"><span class="p">}</span> 1679</span><span id="__span-10-4"><span class="nx">app</span><span class="p">.</span><span class="nx">onError</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">err</span><span class="p">;</span> 1680</span></code></pre></div> 1681<div class="language-cpp highlight"><pre><span></span><code><span id="__span-11-1"><span class="k">extern</span><span class="w"> </span><span class="s">"C"</span><span class="w"> </span><span class="n">DllExport</span> 1682</span><span id="__span-11-2"><span class="n">PF_Err</span><span class="w"> </span><span class="n">PluginDataEntryFunction</span><span class="p">(</span> 1683</span><span id="__span-11-3"><span class="w"> </span><span class="n">PF_PluginDataPtr</span><span class="w"> </span><span class="n">inPtr</span><span class="p">,</span> 1684</span><span id="__span-11-4"><span class="w"> </span><span class="n">PF_PluginDataCB</span><span class="w"> </span><span class="n">inPluginDataCallBackPtr</span><span class="p">,</span> 1685</span><span id="__span-11-5"><span class="w"> </span><span class="n">SPBasicSuite</span><span class="o">*</span><span class="w"> </span><span class="n">inSPBasicSuitePtr</span><span class="p">,</span> 1686</span><span id="__span-11-6"><span class="w"> </span><span class="k">const</span><span class="w"> </span><span class="kt">char</span><span class="o">*</span><span class="w"> </span><span class="n">inHostName</span><span class="p">,</span> 1687</span><span id="__span-11-7"><span class="w"> </span><span class="k">const</span><span class="w"> </span><span class="kt">char</span><span class="o">*</span><span class="w"> </span><span class="n">inHostVersion</span><span class="p">)</span> 1688</span><span id="__span-11-8"><span class="p">{</span> 1689</span><span id="__span-11-9"><span class="n">PF_Err</span><span class="w"> </span><span class="n">result</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">PF_Err_INVALID_CALLBACK</span><span class="p">;</span> 1690</span><span id="__span-11-10"> 1691</span><span id="__span-11-11"><span class="n">result</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">
1691PF_REGISTER_EFFECT</span><span class="p">(</span> 1692</span><span id="__span-11-12"><span class="w"> </span><span class="n">inPtr</span><span class="p">,</span> 1693</span><span id="__span-11-13"><span class="w"> </span><span class="n">inPluginDataCallBackPtr</span><span class="p">,</span> 1694</span><span id="__span-11-14"><span class="w"> </span><span class="s">"ColorGrid"</span><span class="p">,</span><span class="w"> </span><span class="c1">// Name</span> 1695</span><span id="__span-11-15"><span class="w"> </span><span class="s">"ADBE ColorGrid"</span><span class="p">,</span><span class="w"> </span><span class="c1">// Match Name</span> 1696</span><span id="__span-11-16"><span class="w"> </span><span class="s">"Sample Plug-ins"</span><span class="p">,</span><span class="w"> </span><span class="c1">// Category</span> 1697</span><span id="__span-11-17"><span class="w"> </span><span class="n">AE_RESERVED_INFO</span><span class="p">);</span><span class="w"> </span><span class="c1">// Reserved Info</span> 1698</span><span id="__span-11-18"> 1699</span><span id="__span-11-19"><span class="k">return</span><span class="w"> </span><span class="n">result</span><span class="p">;</span> 1700</span><span id="__span-11-20"><span class="p">}</span> 1701</span></code></pre></div> 1702<div class="language-applescript highlight"><pre><span></span><code><span id="__span-12-1"><span class="k">set</span> <span class="nv">theFile</span> <span class="k">to</span> <span class="nb">choose file</span> 1703</span><span id="__span-12-2"><span class="k">tell</span> <span class="nb">application</span> <span class="s2">"Adobe After Effects CS6"</span> 1704</span><span id="__span-12-3"> <span class="nv">DoScriptFile</span> <span class="nv">theFile</span> 1705</span><span id="__span-12-4"><span class="k">end</span> <span class="k">tell</span> 1706</span></code></pre></div> 1707</div> 1708<div class="tabbed-block"> 1709<div class="language-text highlight"><pre><span></span><code><span id="__span-13-1">```javascript 1710</span><span id="__span-13-2">function err(errString) { 1711</span><span id="__span-13-3"> alert(errString) ; 1712</span><span id="__span-13-4">} 1713</span><span id="__span-13-5">app.onError = err; 1714</span><span id="__span-13-6">``` 1715</span></code></pre></div> 1716<div class="language-text highlight"><pre><span></span><code><span id="__span-14-1">```cpp 1717</span><span id="__span-14-2">extern "C" DllExport 1718</span><span id="__span-14-3">PF_Err PluginDataEntryFunction( 1719</span><span id="__span-14-4"> PF_PluginDataPtr inPtr, 1720</span><span id="__span-14-5"> PF_PluginDataCB inPluginDataCallBackPtr, 1721</span><span id="__span-14-6"> SPBasicSuite* inSPBasicSuitePtr, 1722</span><span id="__span-14-7"> const char* inHostName, 1723</span><span id="__span-14-8"> const char* inHostVersion) 1724</span><span id="__span-14-9">{ 1725</span><span id="__span-14-10">PF_Err result = PF_Err_INVALID_CALLBACK; 1726</span><span id="__span-14-11"> 1727</span><span id="__span-14-12">
1727result = PF_REGISTER_EFFECT( 1728</span><span id="__span-14-13"> inPtr, 1729</span><span id="__span-14-14"> inPluginDataCallBackPtr, 1730</span><span id="__span-14-15"> "ColorGrid", // Name 1731</span><span id="__span-14-16"> "ADBE ColorGrid", // Match Name 1732</span><span id="__span-14-17"> "Sample Plug-ins", // Category 1733</span><span id="__span-14-18"> AE_RESERVED_INFO); // Reserved Info 1734</span><span id="__span-14-19"> 1735</span><span id="__span-14-20">return result; 1736</span><span id="__span-14-21">} 1737</span><span id="__span-14-22">``` 1738</span></code></pre></div> 1739<div class="language-text highlight"><pre><span></span><code><span id="__span-15-1">```applescript 1740</span><span id="__span-15-2">set theFile to choose file 1741</span><span id="__span-15-3">tell application "Adobe After Effects CS6" 1742</span><span id="__span-15-4"> DoScriptFile theFile 1743</span><span id="__span-15-5">end tell 1744</span><span id="__span-15-6">``` 1745</span></code></pre></div> 1746</div> 1747</div> 1748</div> 1749<h3 id="code-fences-within-tables">Code fences within tables<a class="headerlink" href="#code-fences-within-tables" title="Permanent link">¶</a></h3> 1750<p>This is the trickiest, and most annoying to work with.</p> 1751<p>As both code fences and markdown tables pay attention to line breaks, these features necessarily fight one another in order to break rendering.</p> 1752<p>To solve this, the only (currently-known) workaround is to wrap the code in html, so that it can be properly rendered as code. We need to replace line breaks with <code><br/></code>, and wrap the whole block in <code><pre lang="lang"></pre></code> (identifying the language)</p> 1753<div class="admonition note"> 1754<p class="admonition-title">Note</p> 1755<p>Be sure to identify the language here, for syntax highlighting purposes!</p> 1756</div> 1757<p>Here's a before/after of one a simple code sample:</p> 1758<div class="tabbed-set tabbed-alternate" data-tabs="8:2"><input checked="checked" id="__tabbed_8_1" name="__tabbed_8" type="radio" /><input id="__tabbed_8_2" name="__tabbed_8" type="radio" /><div class="tabbed-labels"><label for="__tabbed_8_1">Markdown</label><label for="__tabbed_8_2">HTML</label></div> 1759<div class="tabbed-content"> 1760<div class="tabbed-block"> 1761<div class="language-text highlight"><pre><span></span><code><span id="__span-16-1">```javascript 1762</span><span id="__span-16-2">function err(errString) { 1763</span><span id="__span-16-3"> alert(errString) ; 1764</span><span id="__span-16-4">} 1765</span><span id="__span-16-5">app.onError = err; 1766</span><span id="__span-16-6">``` 1767</span></code></pre></div> 1768</div> 1769<div class="tabbed-block"> 1770<div class="language-html highlight"><pre><span></span><code><span id="__span-17-1"><span class="p"><</span><span class="nt">pre</span> <span class="na">lang</span><span class="o">=</span><span class="s">"javascript"</span><span class="p">></span>function err(errString) {<span class="p"><</span><span class="nt">br</span><span class="p">/></span> alert(errString) ;<span class="p"><</span><span class="nt">br</span><span class="p">/></span>}<span class="p"><</span><span class="nt">br</span><span class="p">/></span>app.onError = err;<span class="p"></</span><span class="nt">pre</span><span class="p">></span> 1771</span></code></pre></div> 1772</div> 1773</div> 1774</div> 1775<p>And when placed within a table:</p> 1776<div class="admonition tip"> 1777<p class="admonition-title">Tip</p> 1778<p>You'll likely want to be using <a href="#complex-tables">complex tables</a>, in order to add additional info about the example within the table itself.</p> 1779</div> 1780<div class="tabbed-set tabbed-alternate" data-tabs="9:2"><input checked="checked" id="__tabbed_9_1" name="__tabbed_9" type="radio" /><input id="__tabbed_9_2" name="__tabbed_9" type="radio" /><div class="tabbed-labels"><label for="__tabbed_9_1">Rendered</label><label for="__tabbed_9_2">Markdown</label></div> 1781<div class="tabbed-content"> 1782<div class="tabbed-block"> 1783<table> 1784<thead> 1785<tr> 1786<th colspan="1" rowspan="1"> 1787<p>Title</p> 1788</th> 1789<th colspan="1" rowspan="1"> 1790<p>Sample</p> 1791</th> 1792</tr> 1793</thead> 1794<tbody> 1795<tr> 1796<td colspan="1" rowspan="1"> 1797<p>Alert error<br /> 1798<br /> 1799</p> 1800</td> 1801<td colspan="1" rowspan="1"> 1802<p>This sample shows how to specify a callback function when an error occurs.<br /> 1803<br /> 1804<div class="language-javascript highlight"><pre><span></span><code><span id="__span-0-1"><span class="kd">function</span><span class="w"> </span><span class="nx">err</span><span class="p">(</span><span class="nx">errString</span><span class="p">)</span><span class="w"> </span><span class="p">{</span> 1805</span><span id="__span-0-2"><span class="w"> </span><span class="nx">alert</span><span class="p">(</span><span class="nx">errString</span><span class="p">)</span><span class="w"> </span><span class="p">;</span> 1806</span><span id="__span-0-3"><span class="p">}</span> 1807</span><span id="__span-0-4"><span class="nx">app</span><span class="p">.</span><span class="nx">onError</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">err</span><span class="p">;</span> 1808</span></code></pre></div></p> 1809</td> 1810</tr> 1811</tbody> 1812</table> 1813</div> 1814<div class="tabbed-block"> 1815<div class="language-markdown highlight"><pre><span></span><code><span id="__span-18-1">+-------------+----------------------------------------------------------------------------------------------------------------+ 1816</span><span id="__span-18-2">| Title | Sample | 1817</span><span id="__span-18-3">+=============+================================================================================================================+ 1818</span><span id="__span-18-4">| Alert error | This sample shows how to specify a callback function when an error occurs. | 1819</span><span id="__span-18-5">| | | 1820</span><span id="__span-18-6">| | <pre lang="javascript">function err(errString) {<br/> alert(errString) ;<br/>}<br/>app.onError = err;</pre> | 1821</span><span id="__span-18-7">+-------------+----------------------------------------------------------------------------------------------------------------+ 1822</span></code></pre></div> 1823</div> 1824</div> 1825</div> 1826<hr /> 1827<h2 id="admonitions">Admonitions<a class="headerlink" href="#admonitions" title="Permanent link">¶</a></h2> 1828<p>Often, we'll want to call out specific pieces of info to the end reader. Typically, these are in the form of <strong>notes</strong>, <strong>tips</strong>, and <strong>warnings</strong> though <a href="https://squidfunk.github.io/mkdocs-material/reference/admonitions/">more admonitions</a> can be used as appropriate.</p> 1829<p>To author these, use the following sytax. Note that the content <strong>must be indented with 4 spaces</strong> in the line following the header!</p> 1830<p>Adding in linebreaks, lists, code, etc. are all supported within admonitions.</p> 1831<h3 id="note">Note<a class="headerlink" href="#note" title="Permanent link">¶</a></h3> 1832<p>Notes detail version added, and/or relevant pieces of information.</p> 1833<div class="tabbed-set tabbed-alternate" data-tabs="10:2"><input checked="checked" id="__tabbed_10_1" name="__tabbed_10" type="radio" /><input id="__tabbed_10_2" name="__tabbed_10" type="radio" /><div class="tabbed-labels"><label for="__tabbed_10_1">Rendered</label><label for="__tabbed_10_2">Markdown</label></div> 1834<div class="tabbed-content"> 1835<div class="tabbed-block"> 1836<div class="admonition note"> 1837<p class="admonition-title">Note</p> 1838<p>Notes detail version added, and/or relevant pieces of information.</p> 1839</div> 1840</div> 1841<div class="tabbed-block"> 1842<div class="language-text highlight"><pre><span></span><code><span id="__span-19-1">!!! note 1843</span><span id="__span-19-2"> Notes detail version added, and/or relevant pieces of information. 1844</span></code></pre></div> 1845</div> 1846</div> 1847</div> 1848<h3 id="tip">Tip<a class="headerlink" href="#tip" title="Permanent link">¶</a></h3> 1849<p>Tips detail version added, and/or relevant pieces of information.</p> 1850<div class="tabbed-set tabbed-alternate" data-tabs="11:2"><input checked="checked" id="__tabbed_11_1" name="__tabbed_11" type="radio" /><input id="__tabbed_11_2" name="__tabbed_11" type="radio" /><div class="tabbed-labels"><label for="__tabbed_11_1">Rendered</label><label for="__tabbed_11_2">Markdown</label></div> 1851<div class="tabbed-content"> 1852<div class="tabbed-block"> 1853<div class="admonition tip"> 1854<p class="admonition-title">Tip</p> 1855<p>Tips detail version added, and/or relevant pieces of information.</p> 1856</div> 1857</div> 1858<div class="tabbed-block"> 1859<div class="language-text highlight"><pre><span></span><code><span id="__span-20-1">!!! tip 1860</span><span id="__span-20-2"> Tips detail version added, and/or relevant pieces of information. 1861</span></code></pre></div> 1862</div> 1863</div> 1864</div> 1865<h3 id="warning">Warning<a class="headerlink" href="#warning" title="Permanent link">¶</a></h3> 1866<p>Warnings convey negative behaviours, or when something won't work the way you'd expect.</p> 1867<div class="tabbed-set tabbed-alternate" data-tabs="12:2"><input checked="checked" id="__tabbed_12_1" name="__tabbed_12" type="radio" /><input id="__tabbed_12_2" name="__tabbed_12" type="radio" /><div class="tabbed-labels"><label for="__tabbed_12_1">Rendered</label><label for="__tabbed_12_2">Markdown</label></div> 1868<div class="tabbed-content"> 1869<div class="tabbed-block"> 1870<div class="admonition warning"> 1871<p class="admonition-title">Warning</p> 1872<p>Warnings convey negative behaviours, or when something won't work the way you'd expect.</p> 1873<p>They're also used to indicate undocumented elements.</p> 1874</div> 1875</div> 1876<div class="tabbed-block"> 1877<div class="language-text highlight"><pre><span></span><code><span id="__span-21-1">!!! warning 1878</span><span id="__span-21-2"> Warnings convey negative behaviours, or when something won't work the way you'd expect. 1879</span><span id="__span-21-3"> 1880</span><span id="__span-21-4"> They're also used to indicate undocumented elements. 1881</span></code></pre></div> 1882</div> 1883</div> 1884</div> 1885<hr /> 1886 1887 1888 1889 1890 1891 1892 1893 1894 1895 1896 1897 1898 1899 <aside class="md-source-file"> 1900 1901 1902 <span class="md-source-file__fact"> 1903 <span class="md-icon" title="Last update"> 1904 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
1904<path d="M21 13.1c-.1 0-.3.1-.4.2l-1 1 2.1 2.1 1-1c.2-.2.2-.6 0-.8l-1.3-1.3c-.1-.1-.2-.2-.4-.2m-1.9 1.8-6.1 6V23h2.1l6.1-6.1zM12.5 7v5.2l4 2.4-1 1L11 13V7zM11 21.9c-5.1-.5-9-4.8-9-9.9C2 6.5 6.5 2 12 2c5.3 0 9.6 4.1 10 9.3-.3-.1-.6-.2-1-.2s-.7.1-1 .2C19.6 7.2 16.2 4 12 4c-4.4 0-8 3.6-8 8 0 4.1 3.1 7.5 7.1 7.9l-.1.2z"/></svg> 1905 </span> 1906 <span class="git-revision-date-localized-plugin git-revision-date-localized-plugin-date" title="February 7, 2025 18:31:32 UTC">February 7, 2025</span> 1907 </span> 1908 1909 1910 1911 1912 1913 </aside> 1914 1915 1916 1917 1918 1919 1920 </article> 1921 </div> 1922 1923
1924<script>var target=document.getElementById(location.hash.slice(1));target&&target.name&&(target.checked=target.name.startsWith("__tabbed_"))</script>
1924 1925 </div> 1926 1927 </main> 1928 1929 <footer class="md-footer"> 1930 1931 1932 1933 <nav class="md-footer__inner md-grid" aria-label="Footer" > 1934 1935 1936 <a href="../getting-set-up/" class="md-footer__link md-footer__link--prev" aria-label="Previous: Getting Set Up"> 1937 <div class="md-footer__button md-icon"> 1938 1939 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11z"/></svg> 1940 </div> 1941 <div class="md-footer__title"> 1942 <span class="md-footer__direction"> 1943 Previous 1944 </span> 1945 <div class="md-ellipsis"> 1946 Getting Set Up 1947 </div> 1948 </div> 1949 </a> 1950 1951 1952 1953 <a href="../other-tips/" class="md-footer__link md-footer__link--next" aria-label="Next: Other Tips"> 1954 <div class="md-footer__title"> 1955 <span class="md-footer__direction"> 1956 Next 1957 </span> 1958 <div class="md-ellipsis"> 1959 Other Tips 1960 </div> 1961 </div> 1962 <div class="md-footer__button md-icon"> 1963 1964 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4 11v2h12l-5.5 5.5 1.42 1.42L19.84 12l-7.92-7.92L10.5 5.5 16 11z"/></svg> 1965 </div> 1966 </a> 1967 1968 </nav> 1969 1970 1971 <div class="md-footer-meta md-typeset"> 1972 <div class="md-footer-meta__inner md-grid"> 1973 <div class="md-copyright"> 1974 1975 <div class="md-copyright__highlight"> 1976 All content is copyright Adobe Systems Incorporated. 1977 </div> 1978 1979 1980 Made with 1981 <a 1982 href="https://squidfunk.github.io/mkdocs-material/" 1983 target="_blank" rel="noopener" 1984 > 1985 Material for MkDocs 1986 </a> 1987 1988</div> 1989 1990<!-- Print button --> 1991<div class="md-copyright"> 1992 1993 <a href="../../print_page/" title="Print Site" class="md-content__button md-icon"> 1994 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M18 3H6v4h12m1 5a1 1 0 0 1-1-1 1 1 0 0 1 1-1 1 1 0 0 1 1 1 1 1 0 0 1-1 1m-3 7H8v-5h8m3-6H5a3 3 0 0 0-3 3v6h4v4h12v-4h4v-6a3 3 0 0 0-3-3"/></svg> 1995 </a> 1996 1997</div> 1998 1999 </div> 2000 </div> 2001</footer> 2002 2003 </div> 2004 <div class="md-dialog" data-md-component="dialog"> 2005 <div class="md-dialog__inner md-typeset"></div> 2006 </div> 2007 2008 2009 2010 2011 2012
2012<script id="__config" type="application/json">{"annotate": null, "base": "../..", "features": ["announce.dismiss", "content.action.edit", "content.action.view", "content.code.copy", "search.highlight", "search.suggest", "toc.follow", "navigation.footer"], "search": "../../assets/javascripts/workers/search.2c215733.min.js", "tags": null, "translations": {"clipboard.copied": "Copied to clipboard", "clipboard.copy": "Copy to clipboard", "search.result.more.one": "1 more on this page", "search.result.more.other": "# more on this page", "search.result.none": "No matching documents", "search.result.one": "1 matching document", "search.result.other": "# matching documents", "search.result.placeholder": "Type to start searching", "search.result.term.missing": "Missing", "select.version": "Select version"}, "version": null}</script>
2012 2013 2014 2015
2015<script src="../../assets/javascripts/bundle.79ae519e.min.js"></script>
2015 2016 2017
2017<script src="../../js/print-site.js"></script>
2017 2018 2019
2019<script src="../../_static/extra.js"></script>
2019 2020 2021
2021<script src="../../docs/_global/js/global.js"></script>
2021 2022 2023 2024 </body> 2025</html>
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.