chore: extend linting of code blocks in the docs (#40245)

* chore: extend linting of code blocks in the docs

* chore: combine lint:markdownlint and lint:markdown scripts
This commit is contained in:
David Sanders 2023-11-20 23:50:08 -08:00 committed by GitHub
parent d6bb9b40b0
commit 3d2a754531
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
71 changed files with 510 additions and 286 deletions

View file

@ -50,7 +50,7 @@ sections.
In the main process, set an IPC listener on the `set-title` channel with the `ipcMain.on` API:
```javascript {6-10,22} title='main.js (Main Process)'
```js {6-10,22} title='main.js (Main Process)'
const { app, BrowserWindow, ipcMain } = require('electron')
const path = require('node:path')
@ -96,7 +96,7 @@ you need to choose which APIs to expose from your preload script using the `cont
In your preload script, add the following code, which will expose a global `window.electronAPI`
variable to your renderer process.
```javascript title='preload.js (Preload Script)'
```js title='preload.js (Preload Script)'
const { contextBridge, ipcRenderer } = require('electron')
contextBridge.exposeInMainWorld('electronAPI', {
@ -138,7 +138,7 @@ To make these elements interactive, we'll be adding a few lines of code in the i
`renderer.js` file that leverages the `window.electronAPI` functionality exposed from the preload
script:
```javascript title='renderer.js (Renderer Process)' @ts-expect-error=[4,5]
```js title='renderer.js (Renderer Process)' @ts-expect-error=[4,5]
const setButton = document.getElementById('btn')
const titleInput = document.getElementById('title')
setButton.addEventListener('click', () => {
@ -181,7 +181,7 @@ provided to the renderer process. Please refer to
[#24427](https://github.com/electron/electron/issues/24427) for details.
:::
```javascript {6-13,25} title='main.js (Main Process)'
```js {6-13,25} title='main.js (Main Process)'
const { app, BrowserWindow, dialog, ipcMain } = require('electron')
const path = require('node:path')
@ -225,7 +225,7 @@ In the preload script, we expose a one-line `openFile` function that calls and r
`ipcRenderer.invoke('dialog:openFile')`. We'll be using this API in the next step to call the
native dialog from our renderer's user interface.
```javascript title='preload.js (Preload Script)'
```js title='preload.js (Preload Script)'
const { contextBridge, ipcRenderer } = require('electron')
contextBridge.exposeInMainWorld('electronAPI', {
@ -263,7 +263,7 @@ The UI consists of a single `#btn` button element that will be used to trigger o
a `#filePath` element that will be used to display the path of the selected file. Making these
pieces work will take a few lines of code in the renderer process script:
```javascript title='renderer.js (Renderer Process)' @ts-expect-error=[5]
```js title='renderer.js (Renderer Process)' @ts-expect-error=[5]
const btn = document.getElementById('btn')
const filePathElement = document.getElementById('filePath')
@ -299,7 +299,7 @@ The `ipcRenderer.send` API that we used for single-way communication can also be
perform two-way communication. This was the recommended way for asynchronous two-way communication
via IPC prior to Electron 7.
```javascript title='preload.js (Preload Script)'
```js title='preload.js (Preload Script)'
// You can also put expose this code to the renderer
// process with the `contextBridge` API
const { ipcRenderer } = require('electron')
@ -310,7 +310,7 @@ ipcRenderer.on('asynchronous-reply', (_event, arg) => {
ipcRenderer.send('asynchronous-message', 'ping')
```
```javascript title='main.js (Main Process)'
```js title='main.js (Main Process)'
ipcMain.on('asynchronous-message', (event, arg) => {
console.log(arg) // prints "ping" in the Node console
// works like `send`, but returning a message back
@ -332,7 +332,7 @@ channels, you would need to add additional app code to track each call and respo
The `ipcRenderer.sendSync` API sends a message to the main process and waits _synchronously_ for a
response.
```javascript title='main.js (Main Process)'
```js title='main.js (Main Process)'
const { ipcMain } = require('electron')
ipcMain.on('synchronous-message', (event, arg) => {
console.log(arg) // prints "ping" in the Node console
@ -340,7 +340,7 @@ ipcMain.on('synchronous-message', (event, arg) => {
})
```
```javascript title='preload.js (Preload Script)'
```js title='preload.js (Preload Script)'
// You can also put expose this code to the renderer
// process with the `contextBridge` API
const { ipcRenderer } = require('electron')
@ -376,7 +376,7 @@ For this demo, we'll need to first build a custom menu in the main process using
module that uses the `webContents.send` API to send an IPC message from the main process to the
target renderer.
```javascript {11-26} title='main.js (Main Process)'
```js {11-26} title='main.js (Main Process)'
const { app, BrowserWindow, Menu, ipcMain } = require('electron')
const path = require('node:path')
@ -412,7 +412,7 @@ function createWindow () {
For the purposes of the tutorial, it's important to note that the `click` handler
sends a message (either `1` or `-1`) to the renderer process through the `update-counter` channel.
```javascript @ts-type={mainWindow:Electron.BrowserWindow}
```js @ts-type={mainWindow:Electron.BrowserWindow}
click: () => mainWindow.webContents.send('update-counter', -1)
```
@ -425,7 +425,7 @@ Make sure you're loading the `index.html` and `preload.js` entry points for the
Like in the previous renderer-to-main example, we use the `contextBridge` and `ipcRenderer`
modules in the preload script to expose IPC functionality to the renderer process:
```javascript title='preload.js (Preload Script)'
```js title='preload.js (Preload Script)'
const { contextBridge, ipcRenderer } = require('electron')
contextBridge.exposeInMainWorld('electronAPI', {
@ -447,7 +447,7 @@ Use a custom handler that invoke the `callback` only with the desired arguments.
In the case of this minimal example, you can call `ipcRenderer.on` directly in the preload script
rather than exposing it over the context bridge.
```javascript title='preload.js (Preload Script)'
```js title='preload.js (Preload Script)'
const { ipcRenderer } = require('electron')
window.addEventListener('DOMContentLoaded', () => {
@ -488,7 +488,7 @@ To tie it all together, we'll create an interface in the loaded HTML file that c
Finally, to make the values update in the HTML document, we'll add a few lines of DOM manipulation
so that the value of the `#counter` element is updated whenever we fire an `update-counter` event.
```javascript title='renderer.js (Renderer Process)' @ts-window-type={electronAPI:{onUpdateCounter:(callback:(value:number)=>void)=>void}}
```js title='renderer.js (Renderer Process)' @ts-window-type={electronAPI:{onUpdateCounter:(callback:(value:number)=>void)=>void}}
const counter = document.getElementById('counter')
window.electronAPI.onUpdateCounter((value) => {
@ -511,7 +511,7 @@ We can demonstrate this with slight modifications to the code from the previous
renderer process, expose another API to send a reply back to the main process through the
`counter-value` channel.
```javascript title='preload.js (Preload Script)'
```js title='preload.js (Preload Script)'
const { contextBridge, ipcRenderer } = require('electron')
contextBridge.exposeInMainWorld('electronAPI', {
@ -520,7 +520,7 @@ contextBridge.exposeInMainWorld('electronAPI', {
})
```
```javascript title='renderer.js (Renderer Process)' @ts-window-type={electronAPI:{onUpdateCounter:(callback:(value:number)=>void)=>void,counterValue:(value:number)=>void}}
```js title='renderer.js (Renderer Process)' @ts-window-type={electronAPI:{onUpdateCounter:(callback:(value:number)=>void)=>void,counterValue:(value:number)=>void}}
const counter = document.getElementById('counter')
window.electronAPI.onUpdateCounter((value) => {
@ -533,7 +533,7 @@ window.electronAPI.onUpdateCounter((value) => {
In the main process, listen for `counter-value` events and handle them appropriately.
```javascript title='main.js (Main Process)'
```js title='main.js (Main Process)'
// ...
ipcMain.on('counter-value', (_event, value) => {
console.log(value) // will print value to Node console