我们将一个对象传递给BrowserWindow构造函数，默认情况下将其设置为hidden。当BrowserWindow实例触发它的“ready-to-show”事件时，我们将调用它的show()方法，这将在UI完全准备好运行后使它不再隐藏。当应用程序通过网络加载远程资源时，这种方法甚至更有用，因为初始化页面可能需要更长的时间。
实现基本功能让我们把一些基本功能放在适当的位置上。对于初学者，我们希望在左窗格中的Markdown发生更改时更新右窗格中呈现的HTML视图(参见图3.7)。这就是我们唯一的依赖—Marked—发挥作用的地方。
图3.7 我们将在左侧窗格中添加一个事件监听器，它将以HTML的形式呈现标记并显示在右侧窗格中。
引入依赖项很容易，因为我们可以使用Node的require来引入marked。让我们在app/renderer.js中添加以下内容。
列表3.6 引入依赖: ./app/renderer.js
const marked = require('marked');
现在，我们可以通过变量marked使用Marked。鉴于我们在图3.7中讨论了应用程序的功能，您可能已经开始怀疑，在开发应用程序时，我们将大量使用#markdown文本区域和#html元素。让我们使用一对变量来存储对每个元素的引用，以便更容易地使用它们，如清单3.7所示。在此过程中，我们还将为UI顶部的每个按钮创建变量。
列表3.7 缓存DOM选择器: ./app/renderer.js
const markdownView = document.querySelector('#markdown');const htmlView = document.querySelector('#html');
const newFileButton = document.querySelector('#new-file');
const openFileButton = document.querySelector('#open-file');
const saveMarkdownButton = document.querySelector('#save-markdown');
const revertButton = document.querySelector('#revert');
const saveHtmlButton = document.querySelector('#save-html');
const showFileButton = document.querySelector('#show-file');
const openInDefaultButton = document.querySelector('#open-in-default');
我们还相当频繁地在htmlView中呈现Markdown，所以我们想给自己一个函数，以便将来更容易实现。
列表3.8 转换markdown到HTML: ./app/renderer.js
marked将我们要呈现的Markdown内容作为第一个参数，并将选项的对象作为第二个参数。我们希望避免意外的脚本注入，因此我们传入了一个对象，并将sanitize属性设置为true。
最后，我们向markdownView添加了一个事件监听器，它将在keyup上读取它的内容(在textarea元素中，内容存储在它的value属性中)，通过marked运行它们，然后将它们加载到htmlView中。结果如图3.8所示。
列表3.9 当Markdown更改时重新呈现HTML: ./app/renderer.js
markdownView.addEventListener('keyup', (event) => {const currentContent = event.target.value;
renderMarkdownToHtml(currentContent);
});