gbrault
/
jupytersketcher
cermin dari https://github.com/gbrault/jupytersketcher.git


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681
							

<!doctype html>
<html lang="en" class="no-js">
  <head>
    
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width,initial-scale=1">
      
      
      <link rel="shortcut icon" href="../assets/images/favicon.png">
      <meta name="generator" content="mkdocs-1.1.2, mkdocs-material-5.5.3">
    
    
        <title>YAML files Reference - Jypyter Sketcher</title>
      
    
      <link rel="stylesheet" href="../assets/stylesheets/main.947af8d5.min.css">
      
      
        <link href="https://fonts.gstatic.com" rel="preconnect" crossorigin>
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,400i,700%7CRoboto+Mono&display=fallback">
        <style>body,input{font-family:"Roboto",-apple-system,BlinkMacSystemFont,Helvetica,Arial,sans-serif}code,kbd,pre{font-family:"Roboto Mono",SFMono-Regular,Consolas,Menlo,monospace}</style>
      
    
  </head>
  
  
    <body dir="ltr">
  
    
    <input class="md-toggle" data-md-toggle="drawer" type="checkbox" id="__drawer" autocomplete="off">
    <input class="md-toggle" data-md-toggle="search" type="checkbox" id="__search" autocomplete="off">
    <label class="md-overlay" for="__drawer"></label>
    <div data-md-component="skip">
      
        
        <a href="#yaml-sketcher-file-grammar" class="md-skip">
          Skip to content
        </a>
      
    </div>
    <div data-md-component="announce">
      
    </div>
    
      <header class="md-header" data-md-component="header">
  <nav class="md-header-nav md-grid" aria-label="Header">
    <a href=".." title="Jypyter Sketcher" class="md-header-nav__button md-logo" aria-label="Jypyter Sketcher">
      
  
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 8a3 3 0 003-3 3 3 0 00-3-3 3 3 0 00-3 3 3 3 0 003 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.54z"/></svg>

    </a>
    <label class="md-header-nav__button md-icon" for="__drawer">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 6h18v2H3V6m0 5h18v2H3v-2m0 5h18v2H3v-2z"/></svg>
    </label>
    <div class="md-header-nav__title" data-md-component="header-title">
      
        <div class="md-header-nav__ellipsis">
          <span class="md-header-nav__topic md-ellipsis">
            Jypyter Sketcher
          </span>
          <span class="md-header-nav__topic md-ellipsis">
            
              YAML files Reference
            
          </span>
        </div>
      
    </div>
    
      <label class="md-header-nav__button md-icon" for="__search">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0116 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.516 6.516 0 019.5 16 6.5 6.5 0 013 9.5 6.5 6.5 0 019.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5z"/></svg>
      </label>
      
<div class="md-search" data-md-component="search" role="dialog">
  <label class="md-search__overlay" for="__search"></label>
  <div class="md-search__inner" role="search">
    <form class="md-search__form" name="search">
      <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" data-md-state="active">
      <label class="md-search__icon md-icon" for="__search">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0116 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.516 6.516 0 019.5 16 6.5 6.5 0 013 9.5 6.5 6.5 0 019.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5z"/></svg>
        <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 11h12z"/></svg>
      </label>
      <button type="reset" class="md-search__icon md-icon" aria-label="Clear" data-md-component="search-reset" tabindex="-1">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 6.41L17.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 12 19 6.41z"/></svg>
      </button>
    </form>
    <div class="md-search__output">
      <div class="md-search__scrollwrap" data-md-scrollfix>
        <div class="md-search-result" data-md-component="search-result">
          <div class="md-search-result__meta">
            Initializing search
          </div>
          <ol class="md-search-result__list"></ol>
        </div>
      </div>
    </div>
  </div>
</div>
    
    
  </nav>
</header>
    
    <div class="md-container" data-md-component="container">
      
        
      <main class="md-main" data-md-component="main">
        <div class="md-main__inner md-grid">
          
            
              <div class="md-sidebar md-sidebar--primary" data-md-component="navigation">
                <div class="md-sidebar__scrollwrap">
                  <div class="md-sidebar__inner">
                    <nav class="md-nav md-nav--primary" aria-label="Navigation" data-md-level="0">
  <label class="md-nav__title" for="__drawer">
    <a href=".." title="Jypyter Sketcher" class="md-nav__button md-logo" aria-label="Jypyter Sketcher">
      
  
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 8a3 3 0 003-3 3 3 0 00-3-3 3 3 0 00-3 3 3 3 0 003 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.54z"/></svg>

    </a>
    Jypyter Sketcher
  </label>
  
  <ul class="md-nav__list" data-md-scrollfix>
    
      
  <li class="md-nav__item">
    <a href=".." title="Home" class="md-nav__link">
      Home
    </a>
  </li>

    
  <li class="md-nav__item">
    <a href="../about/" title="About" class="md-nav__link">
      About
    </a>
  </li>

    
  <li class="md-nav__item">
    <a href="../presentation/" title="Presentation" class="md-nav__link">
      Presentation
    </a>
  </li>

    
  <li class="md-nav__item">
    <a href="../learningbyexample/" title="Learning by Example" class="md-nav__link">
      Learning by Example
    </a>
  </li>

    
  <li class="md-nav__item">
    <a href="../shapereference/" title="Shapes Reference" class="md-nav__link">
      Shapes Reference
    </a>
  </li>

    
  <li class="md-nav__item md-nav__item--active">
    
    <input class="md-nav__toggle md-toggle" data-md-toggle="toc" type="checkbox" id="__toc">
    
    
      <label class="md-nav__link md-nav__link--active" for="__toc">
        YAML files Reference
        <span class="md-nav__icon md-icon">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 9h14V7H3v2m0 4h14v-2H3v2m0 4h14v-2H3v2m16 0h2v-2h-2v2m0-10v2h2V7h-2m0 6h2v-2h-2v2z"/></svg>
        </span>
      </label>
    
    <a href="./" title="YAML files Reference" class="md-nav__link md-nav__link--active">
      YAML files Reference
    </a>
    
      
<nav class="md-nav md-nav--secondary" aria-label="Table of contents">
  
  
    <label class="md-nav__title" for="__toc">
      <span class="md-nav__icon md-icon">
        <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 11h12z"/></svg>
      </span>
      Table of contents
    </label>
    <ul class="md-nav__list" data-md-scrollfix>
      
        <li class="md-nav__item">
  <a href="#yaml-sketcher-file-grammar" class="md-nav__link">
    YAML sketcher file grammar
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#libraries-pysketcher-object-creation-styles-transform" class="md-nav__link">
    Libraries, Pysketcher Object creation, Styles, Transform
  </a>
  
    <nav class="md-nav" aria-label="Libraries, Pysketcher Object creation, Styles, Transform">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#libraries" class="md-nav__link">
    Libraries
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#pysketcher-object-creation" class="md-nav__link">
    Pysketcher object creation
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#styles" class="md-nav__link">
    Styles
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#transform" class="md-nav__link">
    Transform
  </a>
  
</li>
        
      </ul>
    </nav>
  
</li>
      
        <li class="md-nav__item">
  <a href="#example" class="md-nav__link">
    Example
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#code-to-read-or-write-a-yaml-sketcher-file" class="md-nav__link">
    Code to read or write a yaml sketcher file
  </a>
  
</li>
      
    </ul>
  
</nav>
    
  </li>

    
  <li class="md-nav__item">
    <a href="../gallerydoc/" title="Gallery" class="md-nav__link">
      Gallery
    </a>
  </li>

    
  </ul>
</nav>
                  </div>
                </div>
              </div>
            
            
              <div class="md-sidebar md-sidebar--secondary" data-md-component="toc">
                <div class="md-sidebar__scrollwrap">
                  <div class="md-sidebar__inner">
                    
<nav class="md-nav md-nav--secondary" aria-label="Table of contents">
  
  
    <label class="md-nav__title" for="__toc">
      <span class="md-nav__icon md-icon">
        <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 11h12z"/></svg>
      </span>
      Table of contents
    </label>
    <ul class="md-nav__list" data-md-scrollfix>
      
        <li class="md-nav__item">
  <a href="#yaml-sketcher-file-grammar" class="md-nav__link">
    YAML sketcher file grammar
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#libraries-pysketcher-object-creation-styles-transform" class="md-nav__link">
    Libraries, Pysketcher Object creation, Styles, Transform
  </a>
  
    <nav class="md-nav" aria-label="Libraries, Pysketcher Object creation, Styles, Transform">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#libraries" class="md-nav__link">
    Libraries
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#pysketcher-object-creation" class="md-nav__link">
    Pysketcher object creation
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#styles" class="md-nav__link">
    Styles
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#transform" class="md-nav__link">
    Transform
  </a>
  
</li>
        
      </ul>
    </nav>
  
</li>
      
        <li class="md-nav__item">
  <a href="#example" class="md-nav__link">
    Example
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#code-to-read-or-write-a-yaml-sketcher-file" class="md-nav__link">
    Code to read or write a yaml sketcher file
  </a>
  
</li>
      
    </ul>
  
</nav>
                  </div>
                </div>
              </div>
            
          
          <div class="md-content">
            <article class="md-content__inner md-typeset">
              
                
                  <h1>YAML files Reference</h1>
                
                <p>Content</p>
<ul>
<li><a href="#yaml-sketcher-file-grammar">YAML sketcher file grammar</a></li>
<li><a href="#libraries-pysketcher-object-creation-styles-transform">Libraries, Pysketcher Object creation, Styles, Transform</a></li>
<li><a href="#example">Example</a></li>
<li><a href="#code-to-read-or-write-a-yaml-sketcher-file">Code to read or write a yaml sketcher file</a></li>
</ul>
<h2 id="yaml-sketcher-file-grammar">YAML sketcher file grammar</h2>
<p>Sketcher file EBNF Grammar is</p>
<pre><code class="EBNF">Sketch::= Sketch_Name Parts
Sketch_Name::= &quot;-&quot; &quot; &quot; &quot;name: &quot; Identifier Comment? &quot;\n&quot;
Parts::= &quot;-&quot; &quot; &quot; &quot;parts:\n&quot; Comment? Part+
Part::= Part_Name Shapes
Part_Name::= INDENT &quot;-&quot; &quot; &quot; &quot;name: &quot; Identifier Comment? &quot;\n&quot; DEDENT
Shapes::= INDENT &quot; &quot; &quot; &quot; &quot;shapes:\n&quot; Comment? Shape+ DEDENT
Shape::= Simple | DoAction | SketchObject
Simple::= INDENT Identifier &quot;:&quot; PyRightHandExpression Comment? &quot;\n&quot; DEDENT
DoAction::= INDENT Identifier &quot;:&quot; Comment? &quot;\n&quot; Action DEDENT
Action::= INDENT &quot;action:&quot; PyExpression Comment? &quot;\n&quot; DEDENT 
Identifier::= [A-Za-z][_A-Za-z0-9]+
Comment::= &quot;#&quot; STRING
</code></pre>

<p>Here is the railroad grammar diagram:</p>
<p><a href="../resources/yamlpysketchergrammar.xhtml">Yaml Sketcher railroad diagram</a></p>
<p><small><a href="https://bottlecaps.de/rr/ui"target="_blank">[Built thanks]</a></small></p>
<h2 id="libraries-pysketcher-object-creation-styles-transform">Libraries, Pysketcher Object creation, Styles, Transform</h2>
<h3 id="libraries">Libraries</h3>
<p>The libraries token defined in the grammar is</p>
<ul>
<li>a single import directive</li>
<li>a list [] of import directive</li>
<li>one of the import must be pysketcher!</li>
</ul>
<pre><code class="python">from pysketcher import *
</code></pre>

<h3 id="pysketcher-object-creation">Pysketcher object creation</h3>
<ul>
<li>The <code>Python pysktecher object creation</code> is a python class object statment. </li>
<li>The possible class are defined in this <a href="/shapereference">section</a></li>
<li>Every parameter of the object creation can be an expression, based upon variables defined before in the YAML file</li>
</ul>
<h3 id="styles">Styles</h3>
<p>The list of possible style correspond to the list of set_&lt;style&gt; members of the corresponding pysketcher class used for the object creation. This function will be applied to the current object under creation. Parameters of this function can be variable defined upstream. </p>
<h3 id="transform">Transform</h3>
<p>The transform token defined in the grammer is</p>
<ul>
<li>a single transform statement</li>
<li>a list [] of transform statments</li>
<li>a tranform statement is a transformation function that can be applied to the object under construction</li>
<li>example of transform function are rotate, translate</li>
<li>parameters of the transform function can be expression based upon upstream variables definition</li>
</ul>
<h2 id="example">Example</h2>
<pre><code class="yaml">!!omap
- name: unknown
- parts:
  - name: head
    shapes:
      libraries: ['from math import tan, radians, sin, cos', from pysketcher import
          *]
  - name: constants
    shapes:
      fontsize: 18       # size of the characters
      g: 9.81            # constant gravity
      theta: 30.0        # inclined plane angle
      L: 10.0            # sketch sizing parameter
      a: 1.0             #
      xmin: 0.0          # sketech min Abscissa
      ymin: -3.0         # sketech min Ordinate     
      rl: 2.0            # rectangle width
      rL: 1.0            # rectangle length
  - name: frame
    shapes:
      setframe:          # sketch setup
        action: drawing_tool.set_coordinate_system(xmin=xmin-L/5, xmax=xmin+1.5*L,ymin=ymin,
          ymax=ymin+1.5*L,instruction_file='tmp_mpl_friction.py')
      setblackline:      # default frame values and actions
        action: drawing_tool.set_linecolor('black')
      B: point(a+L,0)                    # wall right end
      A: point(a,tan(radians(theta))*L)  # wall left end
      normal_vec: point(sin(radians(theta)),cos(radians(theta)))   # Vector normal to wall
      tangent_vec: point(cos(radians(theta)),-sin(radians(theta))) # Vector tangent to wall
      help_line: Line(A,B)               # wall line
      x: a + 3*L/10.                     # contact point Abscissa
      y: help_line(x=x)                  # contact point Ordinate
      contact: point(x, y)               # contact point: middle of the rectangle bottom edge
      c: contact + rL/2*normal_vec
  - name: body
    shapes:
      rectangle:
        formula: Rectangle(contact, rl, rL)
        style:
          linecolor: blue
          filled_curves: blue
        transform: ['rotate(-theta, contact)', translate(-rl/2*tangent_vec)]
      N:
        formula: Force(contact - rl*normal_vec, contact, r'$N$', text_pos='start')
        style:
          linecolor: black
      wheel:
        formula: &quot;Composition({'outer': rectangle})&quot;
        style:
          shadow: 1
      mc:
        formula: Text(r'$c$', c)
      body:
        formula: &quot;Composition({'wheel': wheel, 'N': N, 'mc': mc})&quot;
        style:
          linecolor: black
  - name: plan
    shapes:
      mB:
        formula: Text(r'$B$',B)
      mA:
        formula: Text(r'$A$', A)
      wall:
        formula: Wall(x=[A[0], B[0]], y=[A[1], B[1]], thickness=-0.25,transparent=False)
        style:
          linecolor: black
      x_const:
        formula: Line(contact, contact + point(0,4))
        style:
          linestyle: dotted
        transform: rotate(-theta, contact)
      x_axis:
        formula: Axis(start=contact+ 2*rl*normal_vec, length=2*rl,label='$x$', rotation_angle=-theta)
      plan:
        formula: &quot;Composition({'body': body, 'inclined wall': wall, 'x start': x_const,\
          \ 'x axis': x_axis, 'mA': mA, 'mB': mB})&quot;
  - name: friction
    shapes:
      mg:
        formula: Gravity(c, rl, text='$Mg$')
        style:
          linecolor: black
      angle:
        formula: Arc_wText(r'$&lt;bslash&gt;theta$', center=B, radius=3, start_angle=180-theta,
          arc_angle=theta, fontsize=fontsize)
        style:
          linecolor: black
          linewidth: 1
      ground:
        formula: Line((B[0]-L/10., 0), (B[0]-L/2.,0))
        stlye:
          linecolor: black
          linestyle: dashed
          linewidth: 1
      friction:
        formula: &quot;Composition({'plan': plan, 'ground': ground, 'mg': mg, 'angle':\
          \ angle})&quot;
</code></pre>

<h2 id="code-to-read-or-write-a-yaml-sketcher-file">Code to read or write a yaml sketcher file</h2>
<p>To read a YAML Pysketcher file definition:</p>
<pre><code class="python">from pysketcher import *
myfig={}
sketch = Sketch(myfig)
sketch.file2Sketch(&quot;dryfriction.yml&quot;)
#...............  can now use sketch to draw something ..................
</code></pre>

<p>To write a YAML Pysketcher file definition:</p>
<pre><code class="python">from pysketcher import *
myfig={}
sketch = Sketch(myfig)
#.............  need to create some Pysketcher objects in the sketch .................
sketch.file2Sketch(&quot;dryfriction.yml&quot;)
</code></pre>
                
              
            </article>
          </div>
        </div>
      </main>
      
        
<footer class="md-footer">
  
    <div class="md-footer-nav">
      <nav class="md-footer-nav__inner md-grid" aria-label="Footer">
        
          <a href="../shapereference/" title="Shapes Reference" class="md-footer-nav__link md-footer-nav__link--prev" rel="prev">
            <div class="md-footer-nav__button md-icon">
              <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 11h12z"/></svg>
            </div>
            <div class="md-footer-nav__title">
              <div class="md-ellipsis">
                <span class="md-footer-nav__direction">
                  Previous
                </span>
                Shapes Reference
              </div>
            </div>
          </a>
        
        
          <a href="../gallerydoc/" title="Gallery" class="md-footer-nav__link md-footer-nav__link--next" rel="next">
            <div class="md-footer-nav__title">
              <div class="md-ellipsis">
                <span class="md-footer-nav__direction">
                  Next
                </span>
                Gallery
              </div>
            </div>
            <div class="md-footer-nav__button md-icon">
              <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 11H4z"/></svg>
            </div>
          </a>
        
      </nav>
    </div>
  
  <div class="md-footer-meta md-typeset">
    <div class="md-footer-meta__inner md-grid">
      <div class="md-footer-copyright">
        
        Made with
        <a href="https://squidfunk.github.io/mkdocs-material/" target="_blank" rel="noopener">
          Material for MkDocs
        </a>
      </div>
      
    </div>
  </div>
</footer>
      
    </div>
    
      <script src="../assets/javascripts/vendor.c3dc8c49.min.js"></script>
      <script src="../assets/javascripts/bundle.f9edbbd5.min.js"></script><script id="__lang" type="application/json">{"clipboard.copy": "Copy to clipboard", "clipboard.copied": "Copied to clipboard", "search.config.lang": "en", "search.config.pipeline": "trimmer, stopWordFilter", "search.config.separator": "[\\s\\-]+", "search.result.placeholder": "Type to start searching", "search.result.none": "No matching documents", "search.result.one": "1 matching document", "search.result.other": "# matching documents"}</script>
      
      <script>
        app = initialize({
          base: "..",
          features: [],
          search: Object.assign({
            worker: "../assets/javascripts/worker/search.8e2cddea.min.js"
          }, typeof search !== "undefined" && search)
        })
      </script>
      
        <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.2/MathJax.js?config=TeX-MML-AM_CHTML"></script>
      
    
  </body>
</html>