our-documentation.md

id	sidebar_position	title	sidebar_label	description	tags
our-documentation.md	3	How to add Tutorials	Documentation Guidelines	This documentation is intended to help you get started with recode hive and to provide you with a comprehensive guide to the features and functionality of the platform. This is a place to learn about technology, programming, web development, data science, and more.	features codeharborhub documentation technology programming web development data science collaboration learning teaching code data projects tutorials resources version control issue tracking git github collaboration learning technology programming web development data science

Diagrams with Mermaid

```mermaid
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
```

```mermaid graph TD; A-->B; A-->C; B-->D; C-->D; ```

Tabs

<Tabs>
  <TabItem value="apple" label="Apple" default>
    This is an apple 🍎
  </TabItem>
  <TabItem value="orange" label="Orange">
    This is an orange 🍊
  </TabItem>
  <TabItem value="banana" label="Banana">
    This is a banana 🍌
  </TabItem>
</Tabs>

This is an apple 🍎 This is an orange 🍊 This is a banana 🍌

Interactive code editor

```jsx live
function Clock(props) {
  const [date, setDate] = useState(new Date());
  useEffect(() => {
    const timerID = setInterval(() => tick(), 1000);

    return function cleanup() {
      clearInterval(timerID);
    };
  });

  function tick() {
    setDate(new Date());
  }

  return (
    <div>
      <h2>It is {date.toLocaleTimeString()}.</h2>
    </div>
  );
}
```

<BrowserWindow minHeight={300} bodyStyle={{padding: 0}}>

function Clock(props) {
  const [date, setDate] = useState(new Date());
  useEffect(() => {
    const timerID = setInterval(() => tick(), 1000);

    return function cleanup() {
      clearInterval(timerID);
    };
  });

  function tick() {
    setDate(new Date());
  }

  return (
    <div>
      <h2>It is {date.toLocaleTimeString()}.</h2>
    </div>
  );
}

Multi-language support code blocks

<Tabs>
<TabItem value="js" label="JavaScript">

```js
function helloWorld() {
  console.log("Hello, world!");
}
```

</TabItem>
<TabItem value="py" label="Python">

```py
def hello_world():
  print("Hello, world!")
```

</TabItem>
<TabItem value="java" label="Java">

```java
class HelloWorld {
  public static void main(String args[]) {
    System.out.println("Hello, World");
  }
}
```

</TabItem>
<TabItem value="c" label="C">

```c
#include <stdio.h>

int main() {
  printf("Hello, World\n");
  return 0;
}
```

</TabItem>
</Tabs>

function helloWorld() {
  console.log("Hello, world!");
}

def hello_world():
  print("Hello, world!")

class HelloWorld {
  public static void main(String args[]) {
    System.out.println("Hello, World");
  }
}

#include <stdio.h>

int main() {
  printf("Hello, World\n");
  return 0;
}

Add Apple Style Window

 <BrowserWindow minHeight={300}>
    <img src="https://github.com/Ajay-Dhangar.png" width="150" /> <br />
    <button onClick={() => alert('Hello, world!')}>Click Me</button>
 </BrowserWindow>

alert('Hello, world!')}>Click Me

Highlighting with metadata string

```jsx {1,4-6,11}
import React from "react";

function MyComponent(props) {
  if (props.isBar) {
    return <div>Bar</div>;
  }

  return <div>Foo</div>;
}

export default MyComponent;
```

<BrowserWindow minHeight={300} bodyStyle={{padding: 0}}> ```jsx {1,4-6,11} import React from "react";

function MyComponent(props) {
  if (props.isBar) {
    return <div>Bar</div>;
  }

  return <div>Foo</div>;
}

export default MyComponent;
```

Line numbering

```jsx {1,4-6,11} showLineNumbers
import React from "react";

function MyComponent(props) {
  if (props.isBar) {
    return <div>Bar</div>;
  }

  return <div>Foo</div>;
}

export default MyComponent;
```

<BrowserWindow minHeight={300} bodyStyle={{padding: 0}}> ```jsx {1,4-6,11} showLineNumbers import React from "react";

function MyComponent(props) {
  if (props.isBar) {
    return <div>Bar</div>;
  }

  return <div>Foo</div>;
}

export default MyComponent;
```

Math Equations with KaTeX

Math equations are rendered using KaTeX. You can write inline math equations or block equations using LaTeX.

Inline

Write inline math equations by wrapping LaTeX equations between $:

Let $f\colon[a,b]\to\R$ be Riemann integrable. Let $F\colon[a,b]\to\R$ be
$F(x)=\int_{a}^{x} f(t)\,dt$. Then $F$ is continuous, and at all $x$ such that
$f$ is continuous at $x$, $F$ is differentiable at $x$ with $F'(x)=f(x)$.

Let $f\colon[a,b] \to \R$ be Riemann integrable. Let $F\colon[a,b]\to\R$ be $F(x)= \int_{a}^{x} f(t),dt$. Then $F$ is continuous, and at all $x$ such that $f$ is continuous at $x$, $F$ is differentiable at $x$ with $F'(x)=f(x)$.

Blocks

For equation block or display mode, use line breaks and $$:

$$
I = \int_0^{2\pi} \sin(x)\,dx
$$

$$ I = \int_0^{2\pi} \sin(x),dx $$

warning

:::warning
Beware of the dark side.
:::

:::warning Beware of the dark side. :::

danger

:::danger
I find your lack of faith disturbing.
:::

:::danger I find your lack of faith disturbing. :::

info

:::info
Luke, I am your father.
:::

:::info Luke, I am your father. :::

success

:::success
The Force will be with you, always.
:::

:::success The Force will be with you, always. :::

Admonitions

:::caution
This is a caution admonition
:::

:::caution This is a caution admonition :::

:::note
This is a note admonition
:::

:::note This is a note admonition :::

:::tip
This is a tip admonition
:::

:::tip This is a tip admonition :::

:::important
This is an important admonition
:::

:::important This is an important admonition :::