Links, Images, and Code Blocks

Creating Links

Links are fundamental for navigating the web. Markdown provides an easy syntax for creating hyperlinks.

The basic syntax is `[Link Text](URL "Optional Title")`.

• Link Text: The visible, clickable text.
• URL: The destination address the link points to.
• Optional Title: Text that appears when a user hovers over the link (often shown as a tooltip).

Syntax and Examples:

[MarkdownBuddy Home](/)
[Google Search](https://www.google.com)
[GitHub](https://github.com "Visit GitHub's website")

Reference-style links:
You can find more information at [the Mozilla Developer Network][mdn].
Another great resource is [Wikipedia][wiki-markdown].

[mdn]: https://developer.mozilla.org/
[wiki-markdown]: https://en.wikipedia.org/wiki/Markdown "Markdown on Wikipedia"

Rendered HTML:

Reference-style links allow you to define the URL elsewhere in your document, keeping the main text cleaner. This is especially useful for long URLs or when using the same link multiple times.

Inserting Images

Images add visual appeal and context to your documents. The Markdown syntax for images is very similar to links, but prefixed with an exclamation mark: ``.

• Alt Text: Descriptive text for the image. Crucial for accessibility (screen readers) and displayed if the image fails to load.
• Image URL: The path or web address of the image file.
• Optional Title: Text that appears on hover.

Syntax and Examples:

![A placeholder image](https://www.markdownbuddy.com/mdbuddy300x200.png "Placeholder")

Reference-style image:
![Another placeholder][placeholder-ref]

[placeholder-ref]: https://www.markdownbuddy.com/mdbuddy200x150.png "Reference Placeholder"

Rendered HTML (using `next/image` for local images is recommended in Next.js projects for optimization):

When using Next.js, it's best practice to store your images in the `public` folder (e.g., `public/images/your-image.png`) and use the `next/image` component for optimized image handling:

// In your .tsx file, after importing Image from 'next/image'
<Image 
  src="/images/your-image.png" 
  alt="Descriptive alt text" 
  width={300} 
  height={200} 
/>

Markdown itself doesn't support specifying image dimensions directly. This is typically handled by CSS or, in Next.js, by the `next/image` component.

Formatting Code

Sharing code is a common task for developers. Markdown makes it easy to format both inline code snippets and larger code blocks.

Inline Code

Wrap inline code with single backticks (`). This is useful for mentioning variable names, function names, or short commands.

Use the `useState` hook for managing state.
The command is `npm install markdownbuddy`.

Rendered HTML:

Fenced Code Blocks

For multi-line code blocks, use triple backticks (```) before and after the code. You can optionally specify the programming language after the opening triple backticks for syntax highlighting in many Markdown renderers.

```javascript
function greet(name) {
  console.log(`Hello, ${name}!`);
}
greet('Developer');
```

```python
def add(a, b):
  return a + b

result = add(5, 3)
print(result)
```

```html
<div>
  <p>This is a paragraph.</p>
</div>
```

Rendered HTML:

function greet(name) {
  console.log(`Hello, ${name}!`);
}
greet('Developer');

def add(a, b):
  return a + b

result = add(5, 3)
print(result)

<div>
  <p>This is a paragraph.</p>
</div>

What's Next?

Excellent! You've now learned how to integrate links, images, and code into your Markdown documents. These are powerful tools for creating rich and engaging content.

In future tutorials, we might explore more advanced topics like tables, task lists, and extended Markdown syntax. For now, you have a strong foundation in the most commonly used Markdown features!

Keep practicing these concepts in the MarkdownBuddy editor and explore more on our tutorial pages.