[Docs] Getting Started guide — hello world plugin (#222139)

## Before

There are two links in
[CONTRIBUTING.md](https://github.com/elastic/kibana/blob/main/CONTRIBUTING.md),
one for elastic employees and another for [external
contributors](https://www.elastic.co/docs/extend/kibana). ["Getting
Started"](https://docs.elastic.dev/kibana-dev-docs/getting-started/hello-world-app)
in internal is a bit outdated (e.g., it mentions old kibana.json instead
of .jsonc). Therefore, when developer starts kibana after adding plugin
he won't see it because bootstrap script looks for kibana.jsonc.

## After

- Code blocks updated to create `kibana.jsonc` in latest format,
formatted in respective languages.
- Screenshots updated.
- Note about plugin generator being outdated.

<img width="671" alt="Screenshot 2025-06-01 at 16 47 13"
src="https://github.com/user-attachments/assets/1cf0a63d-f9f7-4b80-b4df-e6fe7210c76f"
/>

<img width="685" alt="Screenshot 2025-06-01 at 16 49 17"
src="https://github.com/user-attachments/assets/9279c124-d44c-4657-88fa-963bca8566bf"
/>

dev_docs/getting_started/hello_world_plugin.mdx

@@ -21,46 +21,48 @@ This is a good option if you want to understand the bare minimum needed to regis
 
 1. Create your plugin folder. Start off in the `kibana` folder.
 
-```
+```sh
-$ cd examples
+cd examples
-$ mkdir hello_world
+mkdir hello_world
-$ cd hello_world
+cd hello_world
 ```
 
-2. Create the <DocLink id="kibDevAnatomyOfAPlugin" section="kibanajson" text="kibana.json manifest file"/>.
+2. Create the <DocLink id="kibDevAnatomyOfAPlugin" section="kibanajson" text="kibana.jsonc manifest file"/>.
 
-```
+```sh
-$ touch kibana.json
+touch kibana.jsonc
 ```
 
 and add the following:
 
-```
+```json
 {
-  "id": "helloWorld",
+  "type": "plugin",
-  "version": "1.0.0",
+  "id": "@kbn/hello-world-plugin",
-  "kibanaVersion": "kibana",
+  "owner": "@elastic/kibana-core",
-    "owner": {
+  "description": "A plugin which registers a very simple hello world application.",
-    "name": "Kibana Core",
+  "plugin": {
-    "githubTeam": "kibana-core"
+    "id": "helloWorld",
-  },
+    "server": false,
-  "ui": true
+    "browser": true,
+    "requiredPlugins": ["developerExamples"]
+  }
 }
 ```
 
 3. Create a <DocLink id="kibDevAnatomyOfAPlugin" section="tsconfigjson" text="tsconfig.json file" />.
 
-```
+```sh
-$ touch tsconfig.json
+touch tsconfig.json
 ```
 
 And add the following to it:
 
-```
+```json
 {
-  "extends": "../../tsconfig.json",
+  "extends": "../../tsconfig.base.json",
   "compilerOptions": {
-    "outDir": "./target/types",
+    "outDir": "target/types"
   },
   "include": [
     "index.ts",
@@ -70,19 +72,17 @@ And add the following to it:
     "server/**/*.ts",
     "../../typings/**/*"
   ],
-  "exclude": [],
+  "exclude": ["target/**/*"],
-  "references": [
+  "kbn_references": ["@kbn/core", "@kbn/developer-examples-plugin"]
-    { "path": "../../src/core/tsconfig.json" }
-  ]
 }
 ```
 
 4. Create a <DocLink id="kibDevAnatomyOfAPlugin" section="publicindexts" text="`public/plugin.tsx` file "/>.
 
-```
+```sh
-$ mkdir public
+mkdir public
-$ cd public
+cd public
-$ touch plugin.tsx
+touch plugin.tsx
 ```
 
 And add the following to it:
@@ -114,7 +114,7 @@ export class HelloWorldPlugin implements Plugin {
 5. Create a <DocLink id="kibDevAnatomyOfAPlugin" section="publicplugints" text="`public/index.ts` file "/>.
 
 ```
-$ touch index.ts
+touch index.ts
 ```
 
 ```ts
@@ -127,13 +127,19 @@ export function plugin() {
 
 ## 2. Option 2 - Use the automatic plugin generator
 
+---
+
+**Note:** Plugin generator is not yet updated and generated code won't work out-of-the-box. Please refer to [existing examples](https://github.com/elastic/kibana/tree/main/examples).
+
+---
+
 This is an easy option to get up and running ASAP and includes additional code.
 
 Use the Automatic plugin generator to get a basic structure for a new plugin. Plugins that are not part of the Kibana repo should be developed inside the plugins folder. If you are building a new plugin to check in to the Kibana repo, you will choose between a few locations:
 
-`x-pack/plugins` for plugins related to subscription features
+- `x-pack/plugins` for plugins related to subscription features
-`src/plugins` for plugins related to free features
+- `src/plugins` for plugins related to free features
-`examples` for developer example plugins (these will not be included in the distributables)
+- `examples` for developer example plugins (these will not be included in the distributables)
 
 ```
 % node scripts/generate_plugin hello_world
@@ -158,7 +164,11 @@ In one terminal window, run `yarn es snapshot --license trial` to boot up Elasti
 In another terminal window, run `yarn start --run-examples` to boot up Kibana and include the example plugins. Your example plugin should show up in the navigation at the very bottom.
 
 If you build it manually it will look something like this:
-![hello world manual](./hello_world_manual.png)
+
+![hello world manual plugin in nav](./kibana-hello-world-home-nav.png)
+
+![hello world manual plugin](./kibana-hello-world.png)
 
 If you built it with the generator, it will look something like this:
+
 ![hello world generated](./hello_world_generated.png)