Tutorial: How to Insert an Image in Dillinger Markdown Editor

Co-Authored by ChatGPT and Dr. Trevor M. Tomesh

Contact: trevor.tomesh@uwrf.edu

University of Wisconsin - River Falls Department of Computer, Information and Data Science Created: September 19th 2024 Modified: September 19th 2024

Dillinger is a popular online markdown editor that allows you to create and format markdown files easily. Here's a step-by-step guide to inserting an image in your markdown document using Dillinger.

Step 1: Open Dillinger

1. Go to Dillinger.io.

2. If you don’t have an account, you can use it without signing up, or create an account for more features.

Step 2: Upload or Locate Your Image

You need the image you want to insert in your markdown document hosted somewhere online (e.g., a cloud service, image hosting platform, or a GitHub repository). You can’t upload images directly to Dillinger, so they must be accessible via a URL.

Here are some options:

• Upload to Imgur: You can upload your image to Imgur or any similar service.

• Use an Existing Online Image: If the image already exists online, simply copy the image URL.

Step 3: Insert the Image in Markdown

To insert an image, use the following markdown syntax:

![Alt text](image_url)

• Alt text: A short description of the image for accessibility purposes.

• image_url: The direct URL where your image is hosted.

Example:

![My sample image](https://example.com/path/to/image.jpg)

Step 4: Preview the Image

1. Once you’ve added the image markdown, Dillinger will automatically update the preview pane on the right.

2. If everything is correct, you should see the image displayed.

Step 5: Adjust Image Size (Optional)

Markdown doesn’t natively support resizing images, but you can use HTML directly in Dillinger to resize images. For example:

<img src="https://example.com/path/to/image.jpg" alt="My sample image" width="400" />

You can set the width and height attributes to control the size.

Step 6: Save or Export Your Document

Once you're happy with the image placement:

1. You can save the document to your Dillinger account or export it.

2. Dillinger supports export to GitHub, Dropbox, OneDrive, or direct downloads as Markdown, HTML, or PDF files.

Final Example

# Sample Markdown Document

Here is an example image inserted in Dillinger:

![Dillinger Logo](https://dillinger.io/images/dillinger.png)

And here is a resized image using HTML:

<img src="https://dillinger.io/images/dillinger.png" alt="Dillinger Logo" width="300">

This is how easy it is to insert an image using Dillinger.

References:

OpenAI, “Response generated by ChatGPT on how to insert an image into Dillinger markdown editor,” ChatGPT, OpenAI, 2024. [Online]. Available: https://chat.openai.com/. [Accessed: Sep. 19, 2024].