Markdown: A Script to Paste an Image


A Markdown-Jekyll Powershell script to simplify pasting images into a Jekyll blog post.

You can paste an image directly into some Markdown editors, but this often results in the image being saved in the root folder of the project with a bland filename. This script allows you to save the image to a specified media folder with a meaningful filename and generates the appropriate Markdown syntax for easy inclusion in your documents.

About the Script

  • Copy image on clipboard to /media folder (or specified folder)
  • Prompt for filename (with default based on date/time)
  • Output Markdown syntax to reference the image
  • Markdown is copied to clipboard for easy pasting
  • Provides 2 formats for image reference
    • Standard Markdown
    • Custom resizing image macro for a Jekyll site
    • Having both allows the image to viewed in the editor’s preview.
      • Can delete or comment out the Markdown syntax version.

Usage:

the script, as below is saved to ` .\scripts\SaveClipboardImage.ps`
Copy an image to clipboard, then run the script from a PowerShell terminal:

   .\scripts\SaveClipboardImage.ps1 [-MediaFolder <path>]

The Script

# SaveClipboardImage.ps1
#
# Copy image on clipboard to /media folder 
# Output Markdown syntax to reference the image
# Markdown is copied to clipboard for easy pasting
# Provides 2 formats for image reference
# - Standard Markdown
# - Resizing image macro for Jekyll site
#      - Ref [Jekyll: Rendering on a Mobile Part 1](https://davidjones.sportronics.com.au/web/Jekyll-Rendering_on_a_Mobile-rel-web.html)
# Usage:
#   .\SaveClipboardImage.ps1 [-MediaFolder <path>]

param(
    [string]$MediaFolder = "media"
)

# Ensure media folder exists
if (-not (Test-Path $MediaFolder)) {
    New-Item -ItemType Directory -Path $MediaFolder | Out-Null
}

# Get image from clipboard
Add-Type -AssemblyName System.Windows.Forms
$image = [System.Windows.Forms.Clipboard]::GetImage()

if ($null -eq $image) {
    Write-Host "❌ No image found in clipboard."
    exit
}

# Generate default filename
$defaultFileName = "image-$((Get-Date).ToString('yyyyMMdd-HHmmss')).png"

# Prompt user for filename (default shown in brackets)
$inputFileName = Read-Host "Enter filename (default: $defaultFileName)"
if ([string]::IsNullOrWhiteSpace($inputFileName)) {
    $fileName = $defaultFileName
} else {    
    # Ensure .png extension if missing
    if (-not $inputFileName.EndsWith(".png")) {
        $inputFileName += ".png"
    }
    $fileName = $inputFileName
}

$filePath = Join-Path $MediaFolder $fileName
$filePath = ".\" + $filePath 

# Save image
$image.Save($filePath, [System.Drawing.Imaging.ImageFormat]::Png)


# Output Markdown syntax
$markdown = "![${fileName}](/${MediaFolder}/${fileName}"
$markdownAlt = "{% include image.html imagefile = ""/${MediaFolder}/${fileName}"" tag = ""${fileName}"" alt = ""${fileName}""  %}"
$merged = "$markdown`n$markdownAlt"


write-host ""
Write-Host  -ForegroundColor DarkMagenta  "Image saved to $filePath"
write-host ""
Write-Host -ForegroundColor Blue  "Markdown:"
Write-Host -ForegroundColor Green  $merged
Write-Host -ForegroundColor Blue "Copied to clipboard."
# $merged | Set-Clipboard
write-host ""
Write-Host -ForegroundColor Red "Paste Markdown from clipboard."
Write-Host -ForegroundColor Red "Make sure that the tag is unique for the page."
write-host ""

Jekyll Include Macro Format

the line of code $markdownAlt = uses the custom Jekyll image.html include to render images with resizing capabilities as discussed at Jekyll: Rendering on a Mobile Part 1. This displays a .png image normally as part of a Markdown-Jekyll page in desktop resolutions using the image’s size, but on a smaller screen such as on a phone it is rendered such that its width is the width of the phone. This means that the text rendered on the phone is readable without having to zoom in as otherwise everything is shrunk so that the largest image width fits.

Comment

Whilst you can directly paste an image into some Markdown editors, having the image saved in the media folder and referenced via Markdown syntax ensures better organization and portability of your content. When you do directly paste an image, it is saved in the root folder of the project with a bland filename, which is not ideal.

This script enables you to paste an image into a specified folder, prompt for a meaningful filename, and generate the appropriate Markdown syntax for easy inclusion in your documents.

Nb: the tag property needs to be different for each image on a page, when using the Jekyll include macro. This may need to be manually modified once the Markdown is pasted into the editor.

Making life easier! 😃

Footnote

Had a problem showing one line of code in a code block. This is the line starting with $markdownAlt= as there was an interpretation of the Jekyll code there by the Build, rather than displaying it as-is. It was fixed by adding raw and endraw tags around that line.
Note that the text for these tags is proceeded by openbrace-percent characters and followed by percent-closebrace characters.

Further

In Visual Studio there is an add-in called Copy as HTML which allows copying code with syntax highlighting to the clipboard. This is useful for blog posts. Also, in VS Code there is an extension called Copy Markdown as HTML which does similar.For example:


{% raw %}
# Output Markdown syntax
$markdown = "![${fileName}](/${MediaFolder}/${fileName}"
$markdownAlt = "{% include image.html imagefile = ""/${MediaFolder}/${fileName}"" tag = ""${fileName}"" alt = ""${fileName}""  %}"
$merged = "$markdown`n$markdownAlt"
{% endraw %}

The code block above was generated by opening this page in Visual Studio 2022, selecting the corresponding code lines from The Script section above, and choose Copy as HTML from the Edit menu. The resulting HTML code was pasted into this blog post just above as HTML code. The OpenBrace and CloseBrace characters were replaced with their HTML escape codes namely &#123; and &#125; respectively. And wrt a phone, no need to worry about its width. The post text is full width and the code block here is horizontally scrollable if wider.

 TopicSubtopic
<  Prev:   GitHub
   
 This Category Links 
Category:Web Sites Index:Web Sites
<  Prev:   Jekyll-Markdown