622 lines
		
	
	
	
		
			17 KiB
		
	
	
	
		
			HTML
		
	
	
		
			Executable file
		
	
	
	
	
			
		
		
	
	
			622 lines
		
	
	
	
		
			17 KiB
		
	
	
	
		
			HTML
		
	
	
		
			Executable file
		
	
	
	
	
<!DOCTYPE html>
 | 
						||
<html lang="en">
 | 
						||
  <head>
 | 
						||
    <meta charset="utf-8">
 | 
						||
 | 
						||
    <title>Goodbye Drush Make. Hello Composer!</title>
 | 
						||
 | 
						||
    <meta name="description" content="Goodbye Drush Make. Hello Composer!">
 | 
						||
    <meta name="author" content="Oliver Davies">
 | 
						||
 | 
						||
    <meta name="apple-mobile-web-app-capable" content="yes">
 | 
						||
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
 | 
						||
 | 
						||
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
 | 
						||
 | 
						||
    <link rel="stylesheet" href="css/reveal.css">
 | 
						||
    <link rel="stylesheet" href="css/theme/opdavies.css" id="theme">
 | 
						||
    <link rel="stylesheet" href="css/tomorrow-night-bright.css">
 | 
						||
 | 
						||
    <!-- Printing and PDF exports -->
 | 
						||
    <script>
 | 
						||
      var link = document.createElement( 'link' );
 | 
						||
      link.rel = 'stylesheet';
 | 
						||
      link.type = 'text/css';
 | 
						||
      link.href = window.location.search.match( /print-pdf/gi ) ? 'css/print/pdf.css' : 'css/print/paper.css';
 | 
						||
      document.getElementsByTagName( 'head' )[0].appendChild( link );
 | 
						||
    </script>
 | 
						||
 | 
						||
    <!--[if lt IE 9]>
 | 
						||
      <script src="lib/js/html5shiv.js"></script>
 | 
						||
    <![endif]-->
 | 
						||
  </head>
 | 
						||
 | 
						||
  <body>
 | 
						||
    <div class="reveal">
 | 
						||
      <div class="slides">
 | 
						||
        <section>
 | 
						||
          <h1 class="is-big">
 | 
						||
            Goodbye Drush Make. Hello Composer!
 | 
						||
          </h1>
 | 
						||
 | 
						||
          <img
 | 
						||
            src="images/composer.png"
 | 
						||
            alt=""
 | 
						||
            class="no-border no-shadow"
 | 
						||
            style="max-height: 300px">
 | 
						||
        </section>
 | 
						||
 | 
						||
        <section>
 | 
						||
          <img src="images/drush-make-talk.png" alt="">
 | 
						||
        </section>
 | 
						||
 | 
						||
        <section data-background-transition="none">
 | 
						||
          <section>
 | 
						||
            <h2>Oliver Davies</h2>
 | 
						||
 | 
						||
            <div class="columns">
 | 
						||
              <div class="column">
 | 
						||
                <ul class="bullets medium">
 | 
						||
                  <li>Senior Drupal/PHP Developer</li>
 | 
						||
                  <li>Appnovation Technologies</li>
 | 
						||
                  <li>@opdavies</li>
 | 
						||
                </ul>
 | 
						||
              </div>
 | 
						||
 | 
						||
              <div class="column is-3">
 | 
						||
                <img class="no-border no-shadow" src="images/me_thumb.jpg">
 | 
						||
                <img class="no-border no-shadow" src="images/appnovation.png">
 | 
						||
              </div>
 | 
						||
            </div>
 | 
						||
          </section>
 | 
						||
 | 
						||
          <section>
 | 
						||
            <h2>Also...</h2>
 | 
						||
 | 
						||
            <ul class="bullets medium">
 | 
						||
              <li>Former Drupal Association employee</li>
 | 
						||
              <li>Drupal 7 and 8 core contributor and mentor</li>
 | 
						||
              <li>Co-organiser of Drupal Bristol, SWDUG and PHPSW</li>
 | 
						||
              <li>Co-founder and co-organiser of DrupalCamp Bristol</li>
 | 
						||
              <li>Symfony/Silex/Laravel hobbyist</li>
 | 
						||
            </ul>
 | 
						||
          </section>
 | 
						||
        </section>
 | 
						||
 | 
						||
        <section data-background-transition="none">
 | 
						||
          <section
 | 
						||
            data-background="#0076C2"
 | 
						||
            data-background-transition="none">
 | 
						||
            <h2 class="is-white">
 | 
						||
              The "Old" Ways
 | 
						||
            </h2>
 | 
						||
          </section>
 | 
						||
 | 
						||
          <section>
 | 
						||
            <h2>
 | 
						||
              Monolith repository
 | 
						||
            </h2>
 | 
						||
 | 
						||
            <ul class="bullets">
 | 
						||
              <li>Everything in one repository</li>
 | 
						||
              <li>Easiest to set up, most difficult to maintain</li>
 | 
						||
              <li>Core, contrib code in your repository</li>
 | 
						||
            </ul>
 | 
						||
          </section>
 | 
						||
 | 
						||
          <section data-background-transition="none">
 | 
						||
            <h2>
 | 
						||
              Drush Make
 | 
						||
            </h2>
 | 
						||
 | 
						||
            <ul class="bullets">
 | 
						||
              <li>Define your site as code</li>
 | 
						||
              <li>Automated updates, patching</li>
 | 
						||
            </ul>
 | 
						||
          </section>
 | 
						||
 | 
						||
          <section>
 | 
						||
            <h2>
 | 
						||
              Drush Make
 | 
						||
            </h2>
 | 
						||
 | 
						||
            <ul class="bullets">
 | 
						||
              <li>Drupal specific</li>
 | 
						||
              <li>Multiple repositories</li>
 | 
						||
              <li>Can't update an existing build</li>
 | 
						||
              <li>Need to "compile"</li>
 | 
						||
            </ul>
 | 
						||
          </section>
 | 
						||
 | 
						||
          <section
 | 
						||
            data-background="#000"
 | 
						||
            data-background-transition="none">
 | 
						||
 | 
						||
            <h2 class="is-white">
 | 
						||
              drupalbristol.make
 | 
						||
            </h2>
 | 
						||
 | 
						||
            <pre><code data-trim class="is-medium">
 | 
						||
api = 2
 | 
						||
core = 7.x
 | 
						||
 | 
						||
projects[drupal][type] = "core"
 | 
						||
projects[drupal][version] = "7.51"
 | 
						||
            </code></pre>
 | 
						||
          </section>
 | 
						||
 | 
						||
          <section
 | 
						||
            data-background="#000"
 | 
						||
            data-background-transition="none">
 | 
						||
 | 
						||
            <h2 class="is-white">
 | 
						||
              drupalbristol.make
 | 
						||
            </h2>
 | 
						||
 | 
						||
            <pre><code data-trim class="is-medium">
 | 
						||
api = 2
 | 
						||
core = 7.x
 | 
						||
 | 
						||
projects[drupal][type] = "core"
 | 
						||
projects[drupal][version] = "7.51"
 | 
						||
 | 
						||
projects[pathauto] = "1.3"
 | 
						||
            </code></pre>
 | 
						||
          </section>
 | 
						||
 | 
						||
          <section
 | 
						||
            data-background="#000"
 | 
						||
            data-background-transition="none">
 | 
						||
 | 
						||
            <h2 class="is-white">
 | 
						||
              drupalbristol.make
 | 
						||
            </h2>
 | 
						||
 | 
						||
            <pre><code data-trim class="is-medium">
 | 
						||
api = 2
 | 
						||
core = 7.x
 | 
						||
 | 
						||
projects[drupal][type] = "core"
 | 
						||
projects[drupal][version] = "7.51"
 | 
						||
 | 
						||
projects[pathauto][version] = "1.3"
 | 
						||
projects[pathauto][subdir] = "contrib"
 | 
						||
projects[pathauto][patch][] = "..."
 | 
						||
            </code></pre>
 | 
						||
          </section>
 | 
						||
 | 
						||
          <section
 | 
						||
            data-background="#000"
 | 
						||
            data-background-transition="none">
 | 
						||
 | 
						||
            <h2 class="is-white">
 | 
						||
              Building
 | 
						||
            </h2>
 | 
						||
 | 
						||
            <pre><code data-trim class="bash is-medium">
 | 
						||
$ drush make drupalbristol.make some-dir
 | 
						||
 | 
						||
Beginning to build drupalbristol.make.
 | 
						||
drupal-7.51 downloaded.
 | 
						||
pathauto-7.x-1.3 downloaded.
 | 
						||
            </code></pre>
 | 
						||
          </section>
 | 
						||
 | 
						||
          <section
 | 
						||
            data-background="#000"
 | 
						||
            data-background-transition="none">
 | 
						||
 | 
						||
            <h2 class="is-white">
 | 
						||
              Building
 | 
						||
            </h2>
 | 
						||
 | 
						||
            <pre><code data-trim class="bash is-medium">
 | 
						||
$ drush make drupalbristol.make some-dir
 | 
						||
 | 
						||
Base path some-dir already exists.
 | 
						||
exit 1
 | 
						||
            </code></pre>
 | 
						||
          </section>
 | 
						||
        </section>
 | 
						||
 | 
						||
        <section data-background-transition="none">
 | 
						||
          <section
 | 
						||
            data-background="#0076C2"
 | 
						||
            data-background-transition="none">
 | 
						||
            <h2 class="is-white">
 | 
						||
              Composer
 | 
						||
            </h2>
 | 
						||
          </section>
 | 
						||
 | 
						||
          <section>
 | 
						||
            <h2>Composer</h2>
 | 
						||
 | 
						||
            <div class="columns">
 | 
						||
              <div class="column is-9">
 | 
						||
                <ul class="bullets">
 | 
						||
                  <li>Dependency manager for PHP</li>
 | 
						||
                  <li>Downloads packages into a <code>vendor</code> directory</li>
 | 
						||
                  <li>Downloads packages from one or more repositories</li>
 | 
						||
                  <li>Generates <code>composer.json</code> and <code>composer.lock</code></li>
 | 
						||
                </ul>
 | 
						||
              </div>
 | 
						||
 | 
						||
              <div class="column is-3">
 | 
						||
                <img src="images/composer.png" alt="" class="no-border no-shadow">
 | 
						||
              </div>
 | 
						||
 | 
						||
              <aside class="notes">
 | 
						||
                vendor directory is usually removed from your version control repo.
 | 
						||
              </aside>
 | 
						||
            </div>
 | 
						||
          </section>
 | 
						||
 | 
						||
          <section
 | 
						||
            data-background="#000"
 | 
						||
            data-background-transition="none">
 | 
						||
 | 
						||
            <h2 class="is-white">
 | 
						||
              Adding Packages
 | 
						||
            </h2>
 | 
						||
 | 
						||
            <pre><code data-trim class="bash is-medium">
 | 
						||
$ composer require silex/silex
 | 
						||
 | 
						||
...
 | 
						||
 | 
						||
  - Installing pimple/pimple (v3.0.2)
 | 
						||
    Downloading: 100%
 | 
						||
 | 
						||
  - Installing silex/silex (v2.0.4)
 | 
						||
    Downloading: 100%
 | 
						||
 | 
						||
Writing lock file
 | 
						||
Generating autoload files
 | 
						||
            </code></pre>
 | 
						||
          </section>
 | 
						||
 | 
						||
          <section
 | 
						||
            data-background="#000"
 | 
						||
            data-background-transition="none">
 | 
						||
 | 
						||
            <h2 class="is-white">
 | 
						||
              composer.json
 | 
						||
            </h2>
 | 
						||
 | 
						||
            <pre><code data-trim class="json is-big">
 | 
						||
"require": {
 | 
						||
    "silex/silex": "^2.0"
 | 
						||
}
 | 
						||
            </code></pre>
 | 
						||
          </section>
 | 
						||
 | 
						||
          <section>
 | 
						||
          <h2>Composer in Drupal</h2>
 | 
						||
 | 
						||
          <ul class="bullets">
 | 
						||
            <li>Dependency management and autoloading in Drupal 8 (no included <code>vendor</code> directory since 8.1.x)</li>
 | 
						||
            <li>Not included with Drupal 7 (Composer Manager and xautoload in contrib)</li>
 | 
						||
          </ul>
 | 
						||
        </section>
 | 
						||
      </section>
 | 
						||
 | 
						||
      <section data-background-transition="none">
 | 
						||
        <section
 | 
						||
          data-background="#0076C2"
 | 
						||
          data-background-transition="none">
 | 
						||
          <h2 class="is-white">
 | 
						||
            Building Drupal with Composer
 | 
						||
          </h2>
 | 
						||
        </section>
 | 
						||
 | 
						||
        <section>
 | 
						||
          <h2>Building Drupal with Composer</h2>
 | 
						||
 | 
						||
          <ul class="bullets">
 | 
						||
            <li>Use <code>drupal/drupal</code> from Packagist</li>
 | 
						||
            <li>Use the <code>drupal-composer/drupal-project</code> template</li>
 | 
						||
          </ul>
 | 
						||
        </section>
 | 
						||
 | 
						||
        <section
 | 
						||
          data-background="#000"
 | 
						||
          data-background-transition="none">
 | 
						||
 | 
						||
          <pre><code data-trim class="bash is-big">
 | 
						||
$ composer create-project \
 | 
						||
drupal/drupal \
 | 
						||
my_site_name ^8.2 --no-dev
 | 
						||
          </code></pre>
 | 
						||
        </section>
 | 
						||
 | 
						||
        <section
 | 
						||
          data-background="#000"
 | 
						||
          data-background-transition="none">
 | 
						||
 | 
						||
          <pre><code data-trim class="bash is-medium">
 | 
						||
$ composer create-project \
 | 
						||
drupal-composer/drupal-project:8.x-dev \
 | 
						||
my_site_name-dir --stability dev \
 | 
						||
--no-interaction
 | 
						||
          </code></pre>
 | 
						||
        </section>
 | 
						||
 | 
						||
        <section>
 | 
						||
          <h2>Comparison</h2>
 | 
						||
 | 
						||
          <ul class="bullets">
 | 
						||
            <li><code>drupal/drupal</code> is a minimum setup, no extras, uses the repo root as the docroot</li>
 | 
						||
            <li><code>drupal-composer/drupal-project</code> includes installer paths, scaffold files, Drush, Drupal Console</li>
 | 
						||
            <li><code>drupal-composer/drupal-project</code> available for Drupal 7 and Drupal 8</li>
 | 
						||
          </ul>
 | 
						||
        </section>
 | 
						||
      </section>
 | 
						||
 | 
						||
      <section data-background-transition="none">
 | 
						||
        <section
 | 
						||
          data-background="#0076C2"
 | 
						||
          data-background-transition="none">
 | 
						||
          <h2 class="is-white">
 | 
						||
            Managing contrib dependencies
 | 
						||
          </h2>
 | 
						||
        </section>
 | 
						||
 | 
						||
        <section
 | 
						||
          data-background="#000"
 | 
						||
          data-background-transition="none">
 | 
						||
 | 
						||
          <h2 class="is-white">
 | 
						||
            Add Drupal.org as a repository
 | 
						||
          </h2>
 | 
						||
 | 
						||
          <pre><code data-trim class="json is-big">
 | 
						||
$ composer config \
 | 
						||
repositories.drupal composer \
 | 
						||
https://packages.drupal.org/8
 | 
						||
          </code></pre>
 | 
						||
        </section>
 | 
						||
 | 
						||
        <section
 | 
						||
          data-background="#000"
 | 
						||
          data-background-transition="none">
 | 
						||
 | 
						||
          <h2 class="is-white">
 | 
						||
            composer.json
 | 
						||
          </h2>
 | 
						||
 | 
						||
          <pre><code data-trim class="json is-medium">
 | 
						||
"repositories": {
 | 
						||
  "drupal": {
 | 
						||
    "type": "composer",
 | 
						||
    "url": "https://packages.drupal.org/8"
 | 
						||
  }
 | 
						||
}
 | 
						||
          </code></pre>
 | 
						||
        </section>
 | 
						||
 | 
						||
        <section
 | 
						||
          data-background="#000"
 | 
						||
          data-background-transition="none">
 | 
						||
 | 
						||
          <h2 class="is-white">
 | 
						||
            Configuring paths
 | 
						||
          </h2>
 | 
						||
 | 
						||
          <pre><code data-trim class="json is-small">
 | 
						||
"extra": {
 | 
						||
  "installer-paths": {
 | 
						||
    "modules/contrib/{$name}": ["type:drupal-module"],
 | 
						||
    "modules/custom/{$name}": ["type:drupal-custom-module"],
 | 
						||
    "profiles/contrib/{$name}": ["type:drupal-profile"],
 | 
						||
    "themes/contrib/{$name}": ["type:drupal-theme"],
 | 
						||
    "themes/custom/{$name}": ["type:drupal-custom-theme"]
 | 
						||
  }
 | 
						||
}
 | 
						||
          </code></pre>
 | 
						||
 | 
						||
          <aside class="notes">
 | 
						||
            Uses the composer/installers plugin
 | 
						||
            Allows for adding packages into directories other than "vendor".
 | 
						||
          </aside>
 | 
						||
        </section>
 | 
						||
 | 
						||
        <section
 | 
						||
          data-background="#000"
 | 
						||
          data-background-transition="none">
 | 
						||
 | 
						||
          <h2 class="is-white">
 | 
						||
            Adding modules
 | 
						||
          </h2>
 | 
						||
 | 
						||
          <pre><code data-trim class="bash is-small">
 | 
						||
$ composer require drupal/pathauto:^1.0
 | 
						||
 | 
						||
...
 | 
						||
 | 
						||
  - Installing drupal/token (1.0.0-beta2)
 | 
						||
    Downloading: 100%
 | 
						||
 | 
						||
  - Installing drupal/ctools (3.0.0-alpha27)
 | 
						||
    Downloading: 100%
 | 
						||
 | 
						||
  - Installing drupal/pathauto (1.0.0-beta1)
 | 
						||
    Downloading: 100%
 | 
						||
            </code></pre>
 | 
						||
 | 
						||
            <aside class="notes">
 | 
						||
              Also downloads token and ctools as they are dependencies.
 | 
						||
            </aside>
 | 
						||
        </section>
 | 
						||
 | 
						||
        <section
 | 
						||
          data-background="#000"
 | 
						||
          data-background-transition="none">
 | 
						||
 | 
						||
          <h2 class="is-white">
 | 
						||
            Adding modules with dependencies
 | 
						||
          </h2>
 | 
						||
 | 
						||
          <pre><code data-trim class="bash is-small">
 | 
						||
$ composer require drupal/address:^1.0
 | 
						||
 | 
						||
...
 | 
						||
 | 
						||
  - Installing commerceguys/addressing (v1.0.0-beta1)
 | 
						||
    Downloading: 100%
 | 
						||
 | 
						||
...
 | 
						||
 | 
						||
  - Installing drupal/address (1.0.0-rc3)
 | 
						||
    Downloading: 100%
 | 
						||
            </code></pre>
 | 
						||
 | 
						||
            <aside class="notes">
 | 
						||
              Also downloads the commerceguys/addressing library as it’s added as a dependency within the modules’s composer.json.
 | 
						||
            </aside>
 | 
						||
          </section>
 | 
						||
 | 
						||
          <section
 | 
						||
            data-background="#000"
 | 
						||
            data-background-transition="none">
 | 
						||
 | 
						||
            <h2 class="is-white">
 | 
						||
              Adding themes
 | 
						||
            </h2>
 | 
						||
 | 
						||
            <pre><code class="bash is-medium">
 | 
						||
$ composer require drupal/omega:^5.0
 | 
						||
            </code></pre>
 | 
						||
          </section>
 | 
						||
 | 
						||
          <section
 | 
						||
            data-background="#000"
 | 
						||
            data-background-transition="none">
 | 
						||
 | 
						||
            <h2 class="is-white">
 | 
						||
              Patching
 | 
						||
            </h2>
 | 
						||
 | 
						||
            <pre><code class="bash is-medium">
 | 
						||
$ composer require cweagans/composer-patches
 | 
						||
            </code></pre>
 | 
						||
          </section>
 | 
						||
 | 
						||
          <section
 | 
						||
            data-background="#000"
 | 
						||
            data-background-transition="none">
 | 
						||
 | 
						||
            <h2 class="is-white">
 | 
						||
              Patching
 | 
						||
            </h2>
 | 
						||
 | 
						||
            <pre><code class="json is-small">
 | 
						||
"extra": {
 | 
						||
  "patches": {
 | 
						||
    "drupal/drupal": {
 | 
						||
      "Add startup configuration for PHP server":
 | 
						||
      "https://www.drupal.org/files/issues/1543858-30.patch"
 | 
						||
    }
 | 
						||
  }
 | 
						||
}
 | 
						||
            </code></pre>
 | 
						||
          </section>
 | 
						||
        </section>
 | 
						||
 | 
						||
        <section data-background-transition="none">
 | 
						||
          <section
 | 
						||
            data-background="#0076C2"
 | 
						||
            data-background-transition="none">
 | 
						||
            <h2 class="is-white">
 | 
						||
              Updating
 | 
						||
            </h2>
 | 
						||
          </section>
 | 
						||
 | 
						||
          <section>
 | 
						||
            <h2>composer install vs update</h2>
 | 
						||
 | 
						||
            <ul class="bullets">
 | 
						||
              <li>"install" updates local code with versions defined in <code>composer.lock</code></li>
 | 
						||
              <li>"update" updates <code>composer.lock</code> with the latest available versions</li>
 | 
						||
            </ul>
 | 
						||
          </section>
 | 
						||
 | 
						||
          <section
 | 
						||
            data-background="#000"
 | 
						||
            data-background-transition="none">
 | 
						||
 | 
						||
            <h2 class="is-white">
 | 
						||
              Updating
 | 
						||
            </h2>
 | 
						||
 | 
						||
            <pre><code class="bash is-big">
 | 
						||
$ composer update \
 | 
						||
--with-dependencies
 | 
						||
 | 
						||
$ composer install --no-dev \
 | 
						||
--optimize-autoloader
 | 
						||
            </code></pre>
 | 
						||
          </section>
 | 
						||
 | 
						||
          <section>
 | 
						||
            <h2>Updating</h2>
 | 
						||
 | 
						||
            <ul class="bullets">
 | 
						||
              <li>Update the versions in composer.lock</li>
 | 
						||
              <li>Deploy new version to the server</li>
 | 
						||
              <li>Update local versions with <code>composer install</code></li>
 | 
						||
            </ul>
 | 
						||
          </section>
 | 
						||
        </section>
 | 
						||
 | 
						||
        <section>
 | 
						||
          <h2>A real example</h2>
 | 
						||
 | 
						||
          <img
 | 
						||
            src="images/drupal-bristol-github.png"
 | 
						||
            alt=""
 | 
						||
            class="no-border no-shadow">
 | 
						||
        </section>
 | 
						||
 | 
						||
        <section>
 | 
						||
          <h2>Resources</h2>
 | 
						||
 | 
						||
          <ul class="bullets">
 | 
						||
            <li>https://getcomposer.org</li>
 | 
						||
            <li>https://www.drupal.org/docs/develop/using-composer/using-composer-to-manage-drupal-site-dependencies</li>
 | 
						||
            <li>https://github.com/drupal-composer/drupal-project</li>
 | 
						||
          </ul>
 | 
						||
        </section>
 | 
						||
 | 
						||
        <section
 | 
						||
          data-background="#0076C2"
 | 
						||
          data-background-transition="none">
 | 
						||
          <h2 class="is-white">Questions?</h2>
 | 
						||
        </section>
 | 
						||
      </div>
 | 
						||
    </div>
 | 
						||
 | 
						||
    <script src="lib/js/head.min.js"></script>
 | 
						||
    <script src="js/reveal.js"></script>
 | 
						||
 | 
						||
    <script>
 | 
						||
      // More info https://github.com/hakimel/reveal.js#configuration
 | 
						||
      Reveal.initialize({
 | 
						||
        controls: false,
 | 
						||
        progress: false,
 | 
						||
        history: true,
 | 
						||
        center: true,
 | 
						||
        transition: 'none', // none/fade/slide/convex/concave/zoom
 | 
						||
 | 
						||
        // More info https://github.com/hakimel/reveal.js#dependencies
 | 
						||
        dependencies: [
 | 
						||
          { src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
 | 
						||
          { src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
 | 
						||
          { src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
 | 
						||
          { src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
 | 
						||
          { src: 'plugin/zoom-js/zoom.js', async: true },
 | 
						||
          { src: 'plugin/notes/notes.js', async: true }
 | 
						||
        ]
 | 
						||
      });
 | 
						||
    </script>
 | 
						||
  </body>
 | 
						||
</html>
 |