Merge pull request electron#292 from demopark/master

Fix the .html file tags in sections directory

Author: zeke

sections/communication/ipc.html

@@ -23,11 +23,11 @@ <h3>The <code>ipc</code> (inter-process communication) module allows you to send
             <button class="demo-button" id="async-msg">Ping</button>
             <span class="demo-response" id="async-reply"></span>
           </div>
-          <p>Using <code>ipc</code> to send messages between processes asynchronously is the preferred method since it will return when finished without blocking other operations in the same process.
+          <p>Using <code>ipc</code> to send messages between processes asynchronously is the preferred method since it will return when finished without blocking other operations in the same process.</p>
 
           <p>This example sends a "ping" from this process (renderer) to the main process. The main process then replies with "pong".</p>
           <h5>Renderer Process</h5>
-          <pre><code data-path="renderer-process/communication/async-msg.js"></pre></code>
+          <pre><code data-path="renderer-process/communication/async-msg.js"></code></pre>
           <h5>Main Process</h5>
           <pre><code data-path="main-process/communication/async-msg.js"></code></pre>
         </div>
@@ -47,7 +47,7 @@ <h5>Main Process</h5>
           <p>You can use the <code>ipc</code> module to send synchronous messages between processes as well, but note that the synchronous nature of this method means that it <b>will block</b> other operations while completing its task.</p>
           <p>This example sends a synchronous message, "ping", from this process (renderer) to the main process. The main process then replies with "pong".</p>
           <h5>Renderer Process</h5>
-          <pre><code data-path="renderer-process/communication/sync-msg.js"></pre></code>
+          <pre><code data-path="renderer-process/communication/sync-msg.js"></code></pre>
           <h5>Main Process</h5>
           <pre><code data-path="main-process/communication/sync-msg.js"></code></pre>
         </div>
@@ -68,7 +68,7 @@ <h5>Main Process</h5>
           <p>In this example we use the <code>remote</code> module to create a new invisible browser window from this renderer process. When the new page is loaded we send a message with <code>ipc</code> that the new window is listening for.</p>
           <p>The new window then computes the factorial and sends the result to be recieved by this, the original, window and added to the page above.</p>
           <h5>Renderer Process</h5>
-          <pre><code data-path="renderer-process/communication/invisible-msg.js"></pre></code>
+          <pre><code data-path="renderer-process/communication/invisible-msg.js"></code></pre>
           <h5>Invisible Window Page HTML</h5>
           <pre><code data-path="sections/communication/invisible.html"></code></pre>
         </div>

sections/media/desktop-capturer.html

@@ -25,7 +25,7 @@ <h3>The <code>desktopCapturer</code> module in Electron can be used to access an
           <p>This demo uses the <code>desktopCapturer</code> module to gather screens in use and select the entire screen and take a snapshot of what is visible.</p>
           <p>Clicking the demo button will take a screenshot of your current screen and open it in your default viewer.</p>
           <h5>Renderer Process</h5>
-          <pre><code data-path="renderer-process/media/desktop-capturer.js"></pre></code>
+          <pre><code data-path="renderer-process/media/desktop-capturer.js"></code></pre>
         </div>
       </div>
     </div>

sections/media/pdf.html

@@ -25,7 +25,7 @@ <h3>The <code>browser window</code> module in Electron has a property, <code>web
           <p>To demonstrate the print to PDF functionality, the demo button above will save this page as a PDF and, if you have a PDF viewer, open the file.</p>
           <p>In a real-world application you're more likely to add this to application menu, but for the purposes of the demo we've set it to the demo button.</p>
           <h5>Renderer Process</h5>
-          <pre><code data-path="renderer-process/media/pdf.js"></pre></code>
+          <pre><code data-path="renderer-process/media/pdf.js"></code></pre>
           <h5>Main Process</h5>
           <pre><code data-path="main-process/media/pdf.js"></code></pre>
 

sections/menus/menus.html

@@ -55,9 +55,9 @@ <h2>ProTip</h2>
           <p>In this demo we use the <code>ipcRenderer</code> module to show the context menu when explicitly calling it from the renderer process.</p>
           <p>See the full <a href="http://electron.atom.io/docs/api/web-contents/#event-context-menu">context-menu event documentation</a> for all the available properties.</p>
           <h5>Main Process</h5>
-          <pre><code data-path="main-process/menus/context-menu.js"></pre></code>
+          <pre><code data-path="main-process/menus/context-menu.js"></code></pre>
           <h5>Renderer Process</h5>
-          <pre><code data-path="renderer-process/menus/context-menu.js"></pre></code>
+          <pre><code data-path="renderer-process/menus/context-menu.js"></code></pre>
         </div>
       </div>
     </div>

sections/menus/shortcuts.html

@@ -45,7 +45,7 @@ <h3>The <code>globalShortcut</code> and <code>Menu</code> modules can be used to
           </p>
 
           <h5>Main Process</h5>
-          <pre><code data-path="main-process/menus/shortcuts.js"></pre></code>
+          <pre><code data-path="main-process/menus/shortcuts.js"></code></pre>
 
           <div class="demo-protip">
             <h2>ProTip</h2>

sections/native-ui/dialogs.html

@@ -26,7 +26,7 @@ <h3>The <code>dialog</code> module in Electron allows you to use native system d
           </div>
           <p>In this demo, the <code>ipc</code> module is used to send a message from the renderer process instructing the main process to launch the open file (or directory) dialog. If a file is selected, the main process can send that information back to the renderer process.</p>
           <h5>Renderer Process</h5>
-          <pre><code data-path="renderer-process/native-ui/dialogs/open-file.js"></pre></code>
+          <pre><code data-path="renderer-process/native-ui/dialogs/open-file.js"></code></pre>
           <h5>Main Process</h5>
           <pre><code data-path="main-process/native-ui/dialogs/open-file.js"></code></pre>
 
@@ -61,7 +61,7 @@ <h2>ProTip</h2>
 
           <p>You can use an error dialog before the app's <code>ready</code> event, which is useful for showing errors upon startup.</p>
           <h5>Renderer Process</h5>
-          <pre><code data-path="renderer-process/native-ui/dialogs/error.js"></pre></code>
+          <pre><code data-path="renderer-process/native-ui/dialogs/error.js"></code></pre>
           <h5>Main Process</h5>
           <pre><code data-path="main-process/native-ui/dialogs/error.js"></code></pre>
         </div>
@@ -84,7 +84,7 @@ <h5>Main Process</h5>
 
           <p>An information dialog can contain an icon, your choice of buttons, title and message.</p>
           <h5>Renderer Process</h5>
-          <pre><code data-path="renderer-process/native-ui/dialogs/information.js"></pre></code>
+          <pre><code data-path="renderer-process/native-ui/dialogs/information.js"></code></pre>
           <h5>Main Process</h5>
           <pre><code data-path="main-process/native-ui/dialogs/information.js"></code></pre>
         </div>
@@ -103,7 +103,7 @@ <h5>Main Process</h5>
           </div>
           <p>In this demo, the <code>ipc</code> module is used to send a message from the renderer process instructing the main process to launch the save dialog. It returns the path selected by the user which can be relayed back to the renderer process.</p>
           <h5>Renderer Process</h5>
-          <pre><code data-path="renderer-process/native-ui/dialogs/save.js"></pre></code>
+          <pre><code data-path="renderer-process/native-ui/dialogs/save.js"></code></pre>
           <h5>Main Process</h5>
           <pre><code data-path="main-process/native-ui/dialogs/save.js"></code></pre>
         </div>

sections/native-ui/ex-links-file-manager.html

@@ -25,7 +25,7 @@ <h3>The <code>shell</code> module in Electron allows you to access certain nativ
           <p>This demonstrates using the <code>shell</code> module to open the system file manager at a particular location.</p>
           <p>Clicking the demo button will open your file manager at the root.</p>
           <h5>Renderer Process</h5>
-          <pre><code data-path="renderer-process/native-ui/ex-links-file-manager/file-manager.js"></pre></code>
+          <pre><code data-path="renderer-process/native-ui/ex-links-file-manager/file-manager.js"></code></pre>
         </div>
       </div>
     </div>
@@ -42,14 +42,14 @@ <h5>Renderer Process</h5>
           <p>If you do not want your app to open website links <em>within</em> the app, you can use the <code>shell</code> module to open them externally. When clicked, the links will open outside of your app and in the user's default web browser.</p>
           <p>When the demo button is clicked, the electron website will open in your browser.<p>
           <h5>Renderer Process</h5>
-          <pre><code data-path="renderer-process/native-ui/ex-links-file-manager/ex-links.js"></pre></code>
+          <pre><code data-path="renderer-process/native-ui/ex-links-file-manager/ex-links.js"></code></pre>
 
           <div class="demo-protip">
             <h2>ProTip</h2>
             <strong>Open all outbound links externally.</strong>
-            <p>You may want to open all <code>http</code> and <code>https</code> links outside of your app. To do this, query the document and loop through each link and add a listener. This app uses the code below which is located in <code>assets/ex-links.js</code>.</h5>
+            <p>You may want to open all <code>http</code> and <code>https</code> links outside of your app. To do this, query the document and loop through each link and add a listener. This app uses the code below which is located in <code>assets/ex-links.js</code>.</p>
             <h5>Renderer Process</h5>
-            <pre><code data-path="assets/ex-links.js"></pre></code>
+            <pre><code data-path="assets/ex-links.js"></code></pre>
           </div>
         </div>
       </div>

sections/native-ui/tray.html

@@ -27,9 +27,9 @@ <h3>The <code>tray</code> module allows you to create an icon in the operating s
 
           <p>In this example the tray icon can be removed by clicking 'Remove' in the context menu or selecting the demo button again.</p>
           <h5>Main Process</h5>
-          <pre><code data-path="main-process/native-ui/tray/tray.js"></pre></code>
+          <pre><code data-path="main-process/native-ui/tray/tray.js"></code></pre>
           <h5>Renderer Process</h5>
-          <pre><code data-path="renderer-process/native-ui/tray/tray.js"></pre></code>
+          <pre><code data-path="renderer-process/native-ui/tray/tray.js"></code></pre>
 
           <div class="demo-protip">
             <h2>ProTip</h2>

sections/system/app-sys-information.html

@@ -25,16 +25,16 @@ <h3>With a few Node.js and Electron modules you can gather information about the
           <p>In this example, to get that information from the renderer process, we use the <code>ipc</code> module to send a message to the main process requesting the app's path.</p>
           <p>See the <a href="http://electron.atom.io/docs/api/app">app module documentation<span class="u-visible-to-screen-reader">(opens in new window)</span></a> for more.</p>
           <h5>Renderer Process</h5>
-          <pre><code data-path="renderer-process/system/app-information.js"></pre></code>
+          <pre><code data-path="renderer-process/system/app-information.js"></code></pre>
           <h5>Main Process</h5>
-          <pre><code data-path="main-process/system/app-information.js"></pre></code>
+          <pre><code data-path="main-process/system/app-information.js"></code></pre>
         </div>
       </div>
     </div>
 
     <div class="demo">
       <div class="demo-wrapper">
-        <button id="app-info-demo-toggle" class="js-container-target demo-toggle-button">Get version information
+        <button id="app-version-demo-toggle" class="js-container-target demo-toggle-button">Get version information
           <div class="demo-meta u-avoid-clicks">Supports: Win, macOS, Linux <span class="demo-meta-divider">|</span> Process: Both</div>
         </button>
         <div class="demo-box">
@@ -46,7 +46,7 @@ <h5>Main Process</h5>
           <p>The example below gets the version of Electron in use by the app.</p>
           <p>See the <a href="http://electron.atom.io/docs/api/process">process documentation<span class="u-visible-to-screen-reader">(opens in new window)</span></a> for more.</p>
           <h5>Renderer Process</h5>
-          <pre><code data-path="renderer-process/system/version-information.js"></pre></code>
+          <pre><code data-path="renderer-process/system/version-information.js"></code></pre>
 
           <div class="demo-protip">
             <h2>ProTip</h2>
@@ -78,7 +78,7 @@ <h2>ProTip</h2>
 
           <p>See the full <a href="https://nodejs.org/api/os.html"> os documentation<span class="u-visible-to-screen-reader">(opens in new window)</span></a> for more.</p>
           <h5>Renderer Process</h5>
-          <pre><code data-path="renderer-process/system/sys-information.js"></pre></code>
+          <pre><code data-path="renderer-process/system/sys-information.js"></code></pre>
         </div>
       </div>
     </div>
@@ -97,7 +97,7 @@ <h5>Renderer Process</h5>
 
           <p>See the full <a href="http://electron.atom.io/docs/api/screen">screen documentation<span class="u-visible-to-screen-reader">(opens in new window)</span></a> for more.</p>
           <h5>Renderer Process</h5>
-          <pre><code data-path="renderer-process/system/screen-information.js"></pre></code>
+          <pre><code data-path="renderer-process/system/screen-information.js"></code></pre>
 
           <div class="demo-protip">
             <h2>ProTip</h2>

sections/system/clipboard.html

@@ -25,7 +25,7 @@ <h3>The <code>clipboard</code> module provides methods to perform copy and paste
           </div>
           <p>In this example we copy a phrase to the clipboard. After clicking 'Copy' use the text area to paste (CMD + V or CTRL + V) the phrase from the clipboard.</p>
           <h5>Renderer Process</h5>
-          <pre><code data-path="renderer-process/system/copy.js"></pre></code>
+          <pre><code data-path="renderer-process/system/copy.js"></code></pre>
         </div>
       </div>
     </div>
@@ -43,7 +43,7 @@ <h5>Renderer Process</h5>
           <p>In this example we copy a string to the clipboard and then paste the results into a message above.</p>
 
           <h5>Renderer Process</h5>
-          <pre><code data-path="renderer-process/system/paste.js"></pre></code>
+          <pre><code data-path="renderer-process/system/paste.js"></code></pre>
         </div>
       </div>
     </div>

sections/system/protocol-handler.html

@@ -26,11 +26,11 @@ <h3>The <code>app</code> module provides methods for handling protocols.</h3>
           <h5>Packaging</h5>
           <p>This feature will only work on macOS when your app is packaged. It will not work when you're launching it in development from the command-line. When you package your app you'll need to make sure the macOS <code>plist</code> for the app is updated to include the new protocol handler. If you're using <code>electron-packager</code> then you can add the flag <code>--extend-info</code> with a path to the <code>plist</code> you've created. The one for this app is below.</p>
           <h5>Renderer Process</h5>
-          <pre><code data-path="renderer-process/system/protocol-handler.js"></pre></code>
+          <pre><code data-path="renderer-process/system/protocol-handler.js"></code></pre>
           <h5>Main Process</h5>
-          <pre><code data-path="main-process/system/protocol-handler.js"></pre></code>
+          <pre><code data-path="main-process/system/protocol-handler.js"></code></pre>
           <h5>macOS plist</h5>
-          <pre><code class="language-xml" data-path="assets/mac/info.plist"></pre></code>
+          <pre><code class="language-xml" data-path="assets/mac/info.plist"></code></pre>
         </div>
       </div>
     </div>

sections/windows/crash-hang.html

@@ -14,7 +14,7 @@ <h3>The <code>BrowserWindow</code> module will emit events when the renderer pro
 
     <div class="demo">
       <div class="demo-wrapper">
-        <button id="new-window-demo-toggle" class="js-container-target demo-toggle-button">Relaunch window after the process crashes
+        <button id="new-window-crashes-demo-toggle" class="js-container-target demo-toggle-button">Relaunch window after the process crashes
           <div class="demo-meta u-avoid-clicks">Supports: Win, macOS, Linux <span class="demo-meta-divider">|</span> Process: Main</div>
         </button>
         <div class="demo-box">
@@ -25,14 +25,14 @@ <h3>The <code>BrowserWindow</code> module will emit events when the renderer pro
           <p>The window is listening for the crash event and when the event occurs it prompts the user with two options: reload or close.</p>
 
           <h5>Renderer Process</h5>
-          <pre><code data-path="renderer-process/windows/process-crash.js"></pre></code>
+          <pre><code data-path="renderer-process/windows/process-crash.js"></code></pre>
         </div>
       </div>
     </div>
 
     <div class="demo">
       <div class="demo-wrapper">
-        <button id="new-window-demo-toggle" class="js-container-target demo-toggle-button">Relaunch window after the process hangs
+        <button id="new-window-hangs-demo-toggle" class="js-container-target demo-toggle-button">Relaunch window after the process hangs
           <div class="demo-meta u-avoid-clicks">Supports: Win, macOS, Linux <span class="demo-meta-divider">|</span> Process: Main</div>
         </button>
         <div class="demo-box">
@@ -43,7 +43,7 @@ <h5>Renderer Process</h5>
           <p>The window is listening for the process to become offcially unresponsive (this can take up to 30 seconds). When this event occurs it prompts the user with two options: reload or close.</p>
 
           <h5>Renderer Process</h5>
-          <pre><code data-path="renderer-process/windows/process-hang.js"></pre></code>
+          <pre><code data-path="renderer-process/windows/process-hang.js"></code></pre>
 
           <div class="demo-protip">
             <h2>ProTip</h2>