Calmcode - rich: Introduction

<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> <title>Calmcode - rich: Introduction</title> <meta name="title" content="Pretty terminal output with Python and Rich."> <meta name="description" content="Print statements are nice but you can make them (literally) richer than just plain text. The rich package helps you do just that."> <meta property="og:type" content="website"> <meta property="og:url" content="https://calmcode.io/course/rich/introduction"> <meta property="og:title" content="Pretty terminal output with Python and Rich."> <meta property="og:description" content="Print statements are nice but you can make them (literally) richer than just plain text. The rich package helps you do just that."> <meta property="og:image" content="https://calmcode.io/static/icons/png/rich.png"> <meta property="twitter:card" content="summary_large_image"> <meta property="twitter:url" content="https://calmcode.io/course/rich/introduction"> <meta property="twitter:title" content="Pretty terminal output with Python and Rich."> <meta property="twitter:description" content="Print statements are nice but you can make them (literally) richer than just plain text. The rich package helps you do just that."> <meta property="twitter:image" content="https://calmcode.io/static/icons/png/rich.png"> <meta charset="utf-8"> <link rel="icon" type="image/png" href="/static/images/branding/logo.png"/> <link rel="shortcut icon" type="image/png" href="/static/images/branding/logo.png"/> <script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio,line-clamp"></script> <script async defer src="https://unpkg.com/htmx.org@1.8.0"></script> <script async defer src="https://unpkg.com/htmx.org@1.8.0/dist/ext/json-enc.js"></script> <script async defer src="https://unpkg.com/alpinejs@3.10.3/dist/cdn.min.js"></script> <script async defer src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.0/highlight.min.js"></script> <script async defer src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.0/languages/python.min.js" charset="UTF-8" ></script> <script async defer data-domain="calmcode.io" src="https://plausible.io/js/plausible.js"></script> <script async defer src="https://kit.fontawesome.com/acfbb54f5f.js" crossorigin="anonymous"></script> <script async src="https://media.ethicalads.io/media/client/ethicalads.min.js"></script> <link rel="stylesheet" href="/static/css/style.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.0/styles/default.min.css"> </head> <body hx-headers='{"X-CSRFToken": "9rTxwyhGd7XUHIkJZImcdpNbHHh3jEMuoIayIJfkElDdcj0nDAb4Rz7sus9hi2ck"}'> <nav class="bg-white shadow"> <div class="max-w-7xl mx-auto px-2 sm:px-6 lg:px-8"> <div class="relative flex justify-between h-16"> <div class="flex-1 flex items-center sm:items-stretch sm:justify-start"> <div class="flex-shrink-0 flex items-center"> <a href="/" "><img class="block h-8 w-auto" src="/static/images/branding/logo.png" alt="Logo" /></a> <div class="hidden sm:ml-12 sm:flex sm:space-x-8"> <a href="/tracks" class="border-transparent text-gray-700 hover:text-green-500 inline-flex items-center px-2 pt-1 border-b-2 text-md font-medium"> Explore Tracks </a> <a href="/practice" class="border-transparent text-gray-700 hover:text-green-500 inline-flex items-center px-2 pt-1 border-b-2 text-md font-medium"> Practice Flashcards </a> <div class="flex justify-center"> <div x-data="{ open: false, toggle() { if (this.open) { return this.close() } this.$refs.button.focus() this.open = true }, close(focusAfter) { if (! this.open) return this.open = false focusAfter && focusAfter.focus() } }" x-on:keydown.escape.prevent.stop="close($refs.button)" x-on:focusin.window="! $refs.panel.contains($event.target) && close()" x-id="['dropdown-button']" class="relative" >  <button x-ref="button" x-on:click="toggle()" :aria-expanded="open" :aria-controls="$id('dropdown-button')" type="button" class="flex items-center gap-2 bg-white border-transparent text-gray-700 hover:text-green-500 inline-flex items-center px-2 pt-1 border-b-2 text-md font-medium" > More  <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor"> <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" /> </svg> </button>  <div x-ref="panel" x-show="open" x-transition.origin.top.left x-on:click.outside="close($refs.button)" :id="$id('dropdown-button')" style="display: none;" class="absolute left-0 my-2 w-40 rounded-md bg-white shadow-md" > <a href="/book" class="flex items-center gap-2 w-full first-of-type:rounded-t-md last-of-type:rounded-b-md px-4 py-2.5 text-left text-md hover:bg-gray-50 disabled:text-gray-500"> Book </a> <a href="/challenge/" class="flex items-center gap-2 w-full first-of-type:rounded-t-md last-of-type:rounded-b-md px-4 py-2.5 text-left text-md hover:bg-gray-50 disabled:text-gray-500"> Challenge </a> <a href="/tils" class="flex items-center gap-2 w-full first-of-type:rounded-t-md last-of-type:rounded-b-md px-4 py-2.5 text-left text-md hover:bg-gray-50 disabled:text-gray-500"> Today I Learned </a> <a href="/datasets" class="flex items-center gap-2 w-full first-of-type:rounded-t-md last-of-type:rounded-b-md px-4 py-2.5 text-left text-md hover:bg-gray-50 disabled:text-gray-500"> Datasets </a> <a href="/blog/" class="flex items-center gap-2 w-full first-of-type:rounded-t-md last-of-type:rounded-b-md px-4 py-2.5 text-left text-md hover:bg-gray-50 disabled:text-gray-500"> Blog </a> <a href="/labs/" class="flex items-center gap-2 w-full first-of-type:rounded-t-md last-of-type:rounded-b-md px-4 py-2.5 text-left text-md hover:bg-gray-50 disabled:text-gray-500"> Labs </a> <a href="/search" class="flex items-center gap-2 w-full first-of-type:rounded-t-md last-of-type:rounded-b-md px-4 py-2.5 text-left text-md hover:bg-gray-50 disabled:text-gray-500"> Search </a> </div> </div> </div> </div> </div> <div class="flex-grow h-16"> </div> <div class="absolute inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0"> <a href="/testimonials" class="border-transparent text-gray-700 hover:text-green-500 inline-flex items-center px-2 pt-1 border-b-2 text-md font-medium"> Membership </a> <a href="/auth/login/" class="border-transparent text-gray-700 hover:text-green-500 inline-flex items-center px-2 pt-1 border-b-2 text-md font-medium"> Login </a> </div> </div> </div> </div> </nav> <div> <div class="max-w-7xl mx-auto px-2 sm:px-6 lg:px-8 pt-6"> <p class="text-center pb-4"> <span class="text-3xl md:text-4xl lg:text-6xl font-bold"> <img class="w-8 md:w-12 lg:w-16 inline-block" src="/static/icons/svg/rich.svg" alt="Calmcode -"> rich: <span class="text-green-500">introduction</span> </span> </p> <h1 class="text-center pb-4"> <span class="text-xl md:text-2xl lg:text-xl font-bold text-gray-500"> Pretty terminal output with Python and Rich. </span> </h1> </div> <div class="max-w-7xl mx-auto px-2 sm:px-6 lg:px-8 pt-6 lg:hidden"> <div class="p-1"> <div class="py-2 text-center"> <a class="px-1 mx-1 md:px-2 md:mx-2 py-2 underline text-lg md:text-2xl" href="/course/rich/introduction">1</a> <a class="px-1 mx-1 md:px-2 md:mx-2 py-2 text-lg md:text-2xl" href="/course/rich/style">2</a> <a class="px-1 mx-1 md:px-2 md:mx-2 py-2 text-lg md:text-2xl" href="/course/rich/emphasis">3</a> <a class="px-1 mx-1 md:px-2 md:mx-2 py-2 text-lg md:text-2xl" href="/course/rich/theme">4</a> <a class="px-1 mx-1 md:px-2 md:mx-2 py-2 text-lg md:text-2xl" href="/course/rich/emoji">5</a> <a class="px-1 mx-1 md:px-2 md:mx-2 py-2 text-lg md:text-2xl" href="/course/rich/log">6</a> <a class="px-1 mx-1 md:px-2 md:mx-2 py-2 text-lg md:text-2xl" href="/course/rich/traceback">7</a> <a class="px-1 mx-1 md:px-2 md:mx-2 py-2 text-lg md:text-2xl" href="/course/rich/save">8</a> <a class="px-1 mx-1 md:px-2 md:mx-2 py-2 text-lg md:text-2xl" href="/course/rich/trees">9</a> <a class="px-1 mx-1 md:px-2 md:mx-2 py-2 text-lg md:text-2xl" href="/course/rich/tables">10</a> <a class="px-1 mx-1 md:px-2 md:mx-2 py-2 text-lg md:text-2xl" href="/course/rich/constructions">11</a> <a class="px-1 mx-1 md:px-2 md:mx-2 py-2 text-lg md:text-2xl" href="/course/rich/main">12</a> </div> </div> </div> <div class="max-w-7xl mx-auto px-2 sm:px-6 lg:px-8 pt-6"> <div class="grid grid-cols-12 gap-4"> <div class="col-span-12 lg:col-span-9"> <div class="relative bg-white" style="padding-bottom: 56.25%;"> <div class="absolute inset-0" data-vimeo-initialized="true"> <div class="relative" style="padding-top: 56.25%;"> <iframe title="main video" src="https://player.vimeo.com/video/424480822" frameborder="0" allow="autoplay; fullscreen" allowfullscreen="" class="absolute inset-0 w-full h-full"></iframe> </div> </div> </div> <div class="flex"> <div class="flex-none w-32 h-16"> </div> <div class="flex-grow h-16"> </div> <div class="flex-none w-32 h-16"> <p class="mt-2 font-bold text-lg text-right"> <a href="/course/rich/style">Next Video</a> </p> </div> </div> </div> <div class="hidden lg:block lg:col-span-3 lg:tex t-lg lg:text-xl lg:pl-6"> <div class="flow-root"> <ul class="-mb-8 pt-2" role="list"> <li> <div class="pb-6"> <div class="flex space-x-3"> <div> <span class="h-4 w-4 m-0.5 rounded-full bg-green-400 flex items-center justify-center ring-8 ring-white"> </span> </div> <div class="min-w-0 flex-1 -mt-1 flex justify-between space-x-4"> <div> <a href="/course/rich/introduction" class="font-medium text-gray-900 underline ">1. Introduction</a> </div> </div> </div> </div> </li> <li> <div class="pb-6"> <div class="flex space-x-3"> <div> <span class="h-4 w-4 m-0.5 rounded-full bg-gray-400 flex items-center justify-center ring-8 ring-white"> </span> </div> <div class="min-w-0 flex-1 -mt-1 flex justify-between space-x-4"> <div> <a href="/course/rich/style" class="font-medium text-gray-900 ">2. Style</a> </div> </div> </div> </div> </li> <li> <div class="pb-6"> <div class="flex space-x-3"> <div> <span class="h-4 w-4 m-0.5 rounded-full bg-gray-400 flex items-center justify-center ring-8 ring-white"> </span> </div> <div class="min-w-0 flex-1 -mt-1 flex justify-between space-x-4"> <div> <a href="/course/rich/emphasis" class="font-medium text-gray-900 ">3. Emphasis</a> </div> </div> </div> </div> </li> <li> <div class="pb-6"> <div class="flex space-x-3"> <div> <span class="h-4 w-4 m-0.5 rounded-full bg-gray-400 flex items-center justify-center ring-8 ring-white"> </span> </div> <div class="min-w-0 flex-1 -mt-1 flex justify-between space-x-4"> <div> <a href="/course/rich/theme" class="font-medium text-gray-900 ">4. Theme</a> </div> </div> </div> </div> </li> <li> <div class="pb-6"> <div class="flex space-x-3"> <div> <span class="h-4 w-4 m-0.5 rounded-full bg-gray-400 flex items-center justify-center ring-8 ring-white"> </span> </div> <div class="min-w-0 flex-1 -mt-1 flex justify-between space-x-4"> <div> <a href="/course/rich/emoji" class="font-medium text-gray-900 ">5. Emoji</a> </div> </div> </div> </div> </li> <li> <div class="pb-6"> <div class="flex space-x-3"> <div> <span class="h-4 w-4 m-0.5 rounded-full bg-gray-400 flex items-center justify-center ring-8 ring-white"> </span> </div> <div class="min-w-0 flex-1 -mt-1 flex justify-between space-x-4"> <div> <a href="/course/rich/log" class="font-medium text-gray-900 ">6. Log</a> </div> </div> </div> </div> </li> <li> <div class="pb-6"> <div class="flex space-x-3"> <div> <span class="h-4 w-4 m-0.5 rounded-full bg-gray-400 flex items-center justify-center ring-8 ring-white"> </span> </div> <div class="min-w-0 flex-1 -mt-1 flex justify-between space-x-4"> <div> <a href="/course/rich/traceback" class="font-medium text-gray-900 ">7. Traceback</a> </div> </div> </div> </div> </li> <li> <div class="pb-6"> <div class="flex space-x-3"> <div> <span class="h-4 w-4 m-0.5 rounded-full bg-gray-400 flex items-center justify-center ring-8 ring-white"> </span> </div> <div class="min-w-0 flex-1 -mt-1 flex justify-between space-x-4"> <div> <a href="/course/rich/save" class="font-medium text-gray-900 ">8. Save</a> </div> </div> </div> </div> </li> <li> <div class="pb-6"> <div class="flex space-x-3"> <div> <span class="h-4 w-4 m-0.5 rounded-full bg-gray-400 flex items-center justify-center ring-8 ring-white"> </span> </div> <div class="min-w-0 flex-1 -mt-1 flex justify-between space-x-4"> <div> <a href="/course/rich/trees" class="font-medium text-gray-900 ">9. Trees</a> </div> </div> </div> </div> </li> <li> <div class="pb-6"> <div class="flex space-x-3"> <div> <span class="h-4 w-4 m-0.5 rounded-full bg-gray-400 flex items-center justify-center ring-8 ring-white"> </span> </div> <div class="min-w-0 flex-1 -mt-1 flex justify-between space-x-4"> <div> <a href="/course/rich/tables" class="font-medium text-gray-900 ">10. Tables</a> </div> </div> </div> </div> </li> <li> <div class="pb-6"> <div class="flex space-x-3"> <div> <span class="h-4 w-4 m-0.5 rounded-full bg-gray-400 flex items-center justify-center ring-8 ring-white"> </span> </div> <div class="min-w-0 flex-1 -mt-1 flex justify-between space-x-4"> <div> <a href="/course/rich/constructions" class="font-medium text-gray-900 ">11. Constructions</a> </div> </div> </div> </div> </li> <li> <div class="pb-6"> <div class="flex space-x-3"> <div> <span class="h-4 w-4 m-0.5 rounded-full bg-gray-400 flex items-center justify-center ring-8 ring-white"> </span> </div> <div class="min-w-0 flex-1 -mt-1 flex justify-between space-x-4"> <div> <a href="/course/rich/main" class="font-medium text-gray-900 ">12. Main</a> </div> </div> </div> </div> </li> </ul> <br/> </div> </div> <div class="col-span-12 lg:col-span-9 row-start-2"> <div> <div class="hidden sm:block"> <div class="border-b border-gray-200"> <nav class="-mb-px flex space-x-8" aria-label="Tabs"> <a class="border-green-500 text-green-600 group inline-flex items-center py-4 px-1 border-b-2 font-medium text-lg" aria-current="page"> <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" /> </svg> <span>Notes</span> </a> </nav> </div> </div> </div> <article class="prose"> <div class="text-md"> <div data-ea-publisher="calmcodeio" data-ea-type="image" class="horizontal" data-ea-style="stickybox" id="calmcode-lesson" style="display: flex; justify-content: center;"></div> <p>Print statements are nice but you can make them (literally) richer than just plain text. The <a href="https://rich.readthedocs.io/">rich</a> package helps you do just that.</p> <p>You will need to install the tool before you can use it.</p> <pre><code>python -m pip install rich </code></pre> <p>Here's the code used in this video.</p> <pre><code class="language-python">from rich import print print(f"I wonder what this looks like 1 + 1 = {1 + 1}") print({"a": [1, 2, 3], "b" : {"c" : 1}}) </code></pre> <p>You can make python print rich text using the rich package, but we'll see many more examples of what it can do for you.</p> </div> </article> <div class="pt-2 grid justify-center"> <div> <a href="https://github.com/koaning/calmcode-feedback/issues/new/choose"> <button type="button" class="hidden md:inline-flex items-center px-3 py-2 border border-gray-300 shadow-sm text-sm leading-4 font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"> <svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor" class="transform transition-transform duration-500 ease-in-out"><path fill-rule="evenodd" d="M12.395 2.553a1 1 0 00-1.45-.385c-.345.23-.614.558-.822.88-.214.33-.403.713-.57 1.116-.334.804-.614 1.768-.84 2.734a31.365 31.365 0 00-.613 3.58 2.64 2.64 0 01-.945-1.067c-.328-.68-.398-1.534-.398-2.654A1 1 0 005.05 6.05 6.981 6.981 0 003 11a7 7 0 1011.95-4.95c-.592-.591-.98-.985-1.348-1.467-.363-.476-.724-1.063-1.207-2.03zM12.12 15.12A3 3 0 017 13s.879.5 2.5.5c0-1 .5-4 1.25-4.5.5 1 .786 1.293 1.371 1.879A2.99 2.99 0 0113 13a2.99 2.99 0 01-.879 2.121z" clip-rule="evenodd"></path></svg> <span class="px-1">Feedback</span> </button> </a> <button type="button" onclick="copy()" class="hidden md:inline-flex items-center px-3 py-2 border border-gray-300 shadow-sm text-sm leading-4 font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-5"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"></path></svg> <span class="px-1">Copy URL</span> </button> </div> <br> </div> </div> <div class="hidden md:block md:col-span-3 text-md md:text-md lg:text-xl">  </div> <br><br> </div> </div> </div> </div> <footer style="background-color: #f8f9fa;" aria-labelledby="footer-heading"> <h2 id="footer-heading" class="sr-only">Footer</h2> <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8"> <div class="xl:grid xl:grid-cols-3 xl:gap-8"> <div class="mt-12 grid grid-cols-2 gap-8 xl:mt-0 xl:col-span-2"> <div class="md:grid md:grid-cols-2 md:gap-8"> <div> <h3 class="text-base font-medium text-gray-900 underline">Foundation</h3> <ul role="list" class="mt-4 space-y-4"> <li> <a href="/index.html" class="text-base text-gray-500 hover:text-green-400"> Home </a> </li> <li> <a href="/story.html" class="text-base text-gray-500 hover:text-green-400"> Story </a> </li> </ul> </div> <div class="mt-12 md:mt-0"> <h3 class="text-base font-medium text-gray-900 underline">Content</h3> <ul role="list" class="mt-4 space-y-4"> <li> <a href="/labs.html" class="text-base text-gray-500 hover:text-green-400">Labs</a> </li> <li> <a href="/tils.html" class="text-base text-gray-500 hover:text-green-400">TILs</a> </li> <li> <a href="/tracks.html" class="text-base text-gray-500 hover:text-green-400">Tracks</a> </li> <li> <a href="/datasets.html" class="text-base text-gray-500 hover:text-green-400">Datasets</a> </li> <li> <a href="/deprecated.html" class="text-base text-gray-500 hover:text-green-400">Old Content</a> </li> </ul> </div> </div> <div class="md:grid md:grid-cols-2 md:gap-8"> <div> <h3 class="text-base font-medium text-gray-900 underline">Resources</h3> <ul role="list" class="mt-4 space-y-4"> <li> <a href="/blog/" class="text-base text-gray-500 hover:text-green-400"> Blog </a> </li> <li> <a href="/testimonials.html" class="text-base text-gray-500 hover:text-green-400"> Testimonials </a> </li> <li> <a href="/terms.html" class="text-base text-gray-500 hover:text-green-400"> Terms </a> </li> <li> <a href="https://plausible.io/calmcode.io" class="text-base text-gray-500 hover:text-green-400"> Statistics </a> </li> <li> <a href="https://status.calmcode.io" class="text-base text-gray-500 hover:text-green-400"> Status </a> </li> </ul> </div> <div class="mt-12 md:mt-0"> <h3 class="text-base font-medium text-gray-900 underline">Contact</h3> <ul role="list" class="mt-4 space-y-4"> <li> <a href="https://twitter.com/fishnets88" class="text-base text-gray-500 hover:text-green-400"> Twitter </a> </li> <li> <a href="/newsletter/signup/" class="text-base text-gray-500 hover:text-green-400"> Newsletter </a> </li> </ul> </div> </div> </div> <div class="space-y-8 xl:col-span-1"> <img class="hidden xl:flex" src="/static/images/branding/calmcode-logo.webp"/> <p class="text-gray-500 text-base">Made by people who want to remedy the skill anxiety. Tools and thoughts that might make your professional life more enjoyable.</p> </div> </div> </div> </footer> </body> <style> .copy-code-button { position: absolute; top: .5rem; right: .5rem; cursor: pointer; } .copy-code-button:hover { cursor: pointer; background-color: #F2F2F2; } .copy-code-button:focus { background-color: #E6E6E6; outline: 0; } .copy-code-button:active { background-color: #D9D9D9; } .prose pre { position: relative; } </style> <script> document.addEventListener('DOMContentLoaded', (event) => { document.querySelectorAll('pre code.language-python').forEach((block) => { hljs.highlightBlock(block); }); document.querySelectorAll('pre code.language-html').forEach((block) => { hljs.highlightBlock(block); }); }); function addCopyButtons(clipboard) { document.querySelectorAll('pre > code').forEach(function (codeBlock) { var button = document.createElement('button'); button.className = 'copy-code-button'; button.type = 'button'; button.style.backgroundImage = "/static/icons/svg/copy.svg" var img = document.createElement('img') img.src = "/static/icons/svg/copy.svg" img.style.opacity = 0.75; img.height = 24 img.width = 24 img.style.margin = 0; button.appendChild(img) button.addEventListener('click', function () { clipboard.writeText(codeBlock.innerText).then(function () { button.blur(); }, function (error) { button.innerText = 'Error'; }); }); var pre = codeBlock; if (pre.parentNode.classList.contains('hljs')) { var highlight = pre.parentNode; highlight.parentNode.insertBefore(button, highlight); } else { pre.parentNode.insertBefore(button, pre); } }); } addCopyButtons(navigator.clipboard); function copy() { var dummy = document.createElement('input'), text = window.location.href; document.body.appendChild(dummy); dummy.value = text; dummy.select(); document.execCommand('copy'); document.body.removeChild(dummy); } </script> </html>

CINXE.COM

Calmcode - rich: Introduction