docs: added fiddle support for code samples (#26501)

* docs: added fiddle support for code samples in quick start guide and features

* docs: removed excessive fiddle links for not final steps

* docs: added eof newlines to fiddle examples

* docs: reworked fiddle examples to be more self-sufficient

* docs: reworked fiddle examples according to mentions

* docs: changed http to https in the offscreen rendering fiddle

* docs: fix recent documents fiddle to be more consistent
This commit is contained in:
Antonio 2020-11-30 09:48:39 +02:00 committed by GitHub
parent 770e245de5
commit fadd513739
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
48 changed files with 787 additions and 29 deletions

View file

@ -28,7 +28,7 @@ If both commands succeeded, you are ready to install Electron.
From a development perspective, an Electron application is essentially a Node.js application. This means that the starting point of your Electron application will be a `package.json` file like in any other Node.js application. A minimal Electron application has the following structure:
```plain
```plaintext
my-electron-app/
├── package.json
├── main.js
@ -53,7 +53,7 @@ The main script specifies the entry point of your Electron application (in our c
The main script may look as follows:
```js
```javascript fiddle='docs/fiddles/quick-start'
const { app, BrowserWindow } = require('electron')
function createWindow () {
@ -66,7 +66,6 @@ function createWindow () {
})
win.loadFile('index.html')
win.webContents.openDevTools()
}
app.whenReady().then(createWindow)
@ -98,7 +97,7 @@ This is the web page you want to display once the application is initialized. Th
The `index.html` page looks as follows:
```html
```html fiddle='docs/fiddles/quick-start'
<!DOCTYPE html>
<html>
<head>
@ -108,9 +107,11 @@ The `index.html` page looks as follows:
</head>
<body style="background: white;">
<h1>Hello World!</h1>
We are using node <script>document.write(process.versions.node)</script>,
Chrome <script>document.write(process.versions.chrome)</script>,
and Electron <script>document.write(process.versions.electron)</script>.
<p>
We are using node <script>document.write(process.versions.node)</script>,
Chrome <script>document.write(process.versions.chrome)</script>,
and Electron <script>document.write(process.versions.electron)</script>.
</p>
</body>
</html>
```