docs/source/_static/svg/code.svg

<svg viewBox="0 0 1300 875" width="1300" height="875" xmlns="http://www.w3.org/2000/svg">
  <foreignObject  width="1300" height="875">
    <div xmlns="http://www.w3.org/1999/xhtml">
      <style>
      body {
        padding: 35px;
      }
      .container {
        width: 1100px;
        height: 775px;
        margin: auto;
        background-color: #2c2c2c;
        color: #ccc;
        font-family: ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;
        font-size: 30px;
        border-radius: 20px;
        box-shadow: 5px 5px 35px #111;
      }
      .top {
        padding: 20px;
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
      }
      .button-l {
        height: 25px;
        width: 25px;
        background-color: #ff554d;
        border-radius: 50%;
        display: inline-block;
      }
      .button-m {
        height: 25px;
        width: 25px;
        background-color: #feb42a;
        border-radius: 50%;
        display: inline-block;
      }
      .button-r {
        height: 25px;
        width: 25px;
        background-color: #25c138;
        border-radius: 50%;
        display: inline-block;
      }
      .content {
        padding-left: 50px;
      }

      @keyframes type-line-01 {
        from {width: 0;}
        to {width: 290px;}
      }

      .line-01 {
        margin: 0; width: 0%; border-right: 0.15em solid transparent; overflow: hidden; display: inline-block; white-space: nowrap;
        animation: type-line-01 1s 0s steps(13, end) forwards, cursor 1s linear 0s 1;
      }

      @keyframes type-line-02 {
        from {width: 0;}
        to {width: 590px;}
      }

      .line-02 {
        margin: 0; width: 0%; border-right: 0.15em solid transparent; overflow: hidden; display: inline-block; white-space: nowrap;
        animation: type-line-02 1s 1s steps(30, end) forwards, cursor 1s linear 1s 1;
      }

      @keyframes type-line-03 {
        from {width: 0;}
        to {width: 700px;}
      }

      .line-03 {
        margin: 0; width: 0%; border-right: 0.15em solid transparent; overflow: hidden; display: inline-block; white-space: nowrap;
        animation: type-line-03 1s 2s steps(35, end) forwards, cursor 1s linear 2s 1;
      }

      @keyframes type-line-04 {
        from {width: 0;}
        to {width: 1022px;}
      }

      .line-04 {
        margin: 0; width: 0%; border-right: 0.15em solid transparent; overflow: hidden; display: inline-block; white-space: nowrap;
        animation: type-line-04 2s 3s steps(54, end) forwards, cursor 1s linear 3s 2;
      }

      @keyframes type-line-05 {
        from {width: 0;}
        to {width: 450px;}
      }

      .line-05 {
        margin: 0; width: 0%; border-right: 0.15em solid transparent; overflow: hidden; display: inline-block; white-space: nowrap;
        animation: type-line-05 1s 5s steps(23, end) forwards, cursor 1s linear 5s 1;
      }

      @keyframes type-line-06 {
        from {width: 0;}
        to {width: 626px;}
      }

      .line-06 {
        margin: 0; width: 0%; border-right: 0.15em solid transparent; overflow: hidden; display: inline-block; white-space: nowrap;
        animation: type-line-06 1s 6s steps(32, end) forwards, cursor 1s linear 6s 1;
      }

      @keyframes type-line-07 {
        from {width: 0;}
        to {width: 126px;}
      }

      .line-07 {
        margin: 0; width: 0%; border-right: 0.15em solid transparent; overflow: hidden; display: inline-block; white-space: nowrap;
        animation: type-line-07 0.5s 7s steps(7, end) forwards, cursor 1s linear 7s 0.5;
      }

      @keyframes type-line-08 {
        from {width: 0;}
        to {width: 198px;}
      }

      .line-08 {
        margin: 0; width: 0%; border-right: 0.15em solid transparent; overflow: hidden; display: inline-block; white-space: nowrap;
        animation: type-line-08 0.5s 7.5s steps(11, end) forwards, cursor 1s linear 7.5s 0.5;
      }

      @keyframes type-line-09 {
        from {width: 0;}
        to {width: 515px;}
      }

      .line-09 {
        margin: 0; width: 0%; border-right: 0.15em solid transparent; overflow: hidden; display: inline-block; white-space: nowrap;
        animation: type-line-09 1s 8s steps(26, end) forwards, cursor 1s linear 8s 1;
      }

      @keyframes type-line-10 {
        from {width: 0;}
        to {width: 626px;}
      }

      .line-10 {
        margin: 0; width: 0%; border-right: 0.15em solid transparent; overflow: hidden; display: inline-block; white-space: nowrap;
        animation: type-line-10 1s 9s steps(32, end) forwards, cursor 1s linear 9s 1;
      }

      @keyframes type-line-11 {
        from {width: 0;}
        to {width: 600px;}
      }

      .line-11 {
        margin: 0; width: 0%; border-right: 0.15em solid transparent; overflow: hidden; display: inline-block; white-space: nowrap;
        animation: type-line-11 1s 10s steps(26, end) forwards, cursor 1s linear 10s 1;
      }

      @keyframes type-line-12 {
        from {width: 0;}
        to {width: 600px;}
      }

      .line-12 {
        margin: 0; width: 0%; border-right: 0.15em solid transparent; overflow: hidden; display: inline-block; white-space: nowrap;
        animation: type-line-11 1s 11s steps(26, end) forwards, cursor 1s linear 11s 1;
      }

      @keyframes cursor {
        from, to, 
        20%, 80% {border-color: transparent;}
        25%, 75% {border-color: white;}
      }

      .c-m {
        color: #368fc8;
      }

      .c-i {
        color: #5AB8DD;
      }

      .c-o {
        color: #5AB8DD;
      }

      .c-c {
        color: #585858;
      }
      </style>
      <body>
      <div class="container">
        <div class="top">
          <span class="button-l"></span>
          <span class="button-m"></span>
          <span class="button-r"></span>
        </div>

        <div class="content">
            <p><span class="line-01"><span class="c-i">import</span> qiskit</span><br/>
            <span class="line-02"><span class="c-i">import</span> qiskit_superstaq <span class="c-i">as</span> qss</span></p>
            
            <p><span class="line-03">superstaq = qss.<span class="c-o">SuperstaqProvider</span>()</span><br/>
            <span class="line-04">backend = superstaq.<span class="c-m">get_backend</span>("ibmq_brisbane_qpu")</span></p>

            <p><span class="line-05"><span class="c-c"># Standard bell circuit</span></span><br/>
            <span class="line-06">qc = qiskit.<span class="c-o">QuantumCircuit</span>(2, 2)</span><br/>
            <span class="line-07">qc.<span class="c-m">h</span>(0)</span><br/>
            <span class="line-08">qc.<span class="c-m">cx</span>(0, 1)</span><br/>
            <span class="line-09">qc.<span class="c-m">measure</span>([0, 1], [0, 1])</span></p>

            <p><span class="line-10">job = backend.<span class="c-m">run</span>(qc, shots=100)</span><br/>
            <span class="line-11"><span class="c-m">print</span>(job.<span class="c-m">result</span>().<span class="c-m">get_counts</span>())</span><br/>
            <span class="line-12"><span class="c-c"># {'11': 49, '00': 51}</span></span></p>
        </div>
      </div>
      </body>

    </div>
  </foreignObject>
</svg>