概要
下記を*.ps1形式として保存して実行すると、Markdownのプレビューみながら編集できるYO!
フリーソフト入れるの大変な方にオヌヌメ
多分需要はないけど
注意
- PowerShell7が必要だよ
- WebBrowser(IE)使ってますよ
いつまで動くかも知らん - ps1形式を実行するときは実行ポリシーを確認してね
- Windows専用だよ
イメージ
# PowerShell 7 以上が必要（ConvertFrom-Markdown 用）
# Windows での WinForms 実行を想定
Add-Type -AssemblyName System.Windows.Forms
Add-Type -AssemblyName System.Drawing
# フォーム
$form = New-Object System.Windows.Forms.Form
$form.Text = "Markdown-Previewer"
$form.Size = New-Object System.Drawing.Size(1200, 800)
$form.StartPosition = "CenterScreen"
# SplitContainer で左右に分割
$split = New-Object System.Windows.Forms.SplitContainer
$split.Dock = "Fill"
$split.Orientation = "Vertical"
$split.Panel1MinSize = 100
$split.Panel2MinSize = 100
# 左: エディタ
$editor = New-Object System.Windows.Forms.TextBox
$editor.Multiline = $true
$editor.ScrollBars = "Both"
$editor.WordWrap = $false
$editor.AcceptsTab = $true
$editor.Dock = "Fill"
$editor.Font = New-Object System.Drawing.Font("Consolas", 10)
# 右: WebBrowser プレビュー
$preview = New-Object System.Windows.Forms.WebBrowser
$preview.Dock = "Fill"
# ステータスバー
$status = New-Object System.Windows.Forms.StatusStrip
$lbl = New-Object System.Windows.Forms.ToolStripStatusLabel
$lbl.Text = "Ready"
$status.Items.Add($lbl) | Out-Null
# メニューストリップ
$menu = New-Object System.Windows.Forms.MenuStrip
# ツールバー風に ToolStrip を追加
$toolStrip = New-Object System.Windows.Forms.ToolStrip
# フォントサイズ選択コンボボックス
$fontSizeCombo = New-Object System.Windows.Forms.ToolStripComboBox
$fontSizeCombo.DropDownStyle = "DropDownList"
$fontSizeCombo.Items.AddRange(@("8","9","10","11","12","14","16","18","20","24","28","32"))
$fontSizeCombo.SelectedItem = "12" # 初期値
# 選択変更イベント
$fontSizeCombo.add_SelectedIndexChanged({
$size = [int]$fontSizeCombo.SelectedItem
$editor.Font = New-Object System.Drawing.Font($editor.Font.FontFamily, $size)
})
$toolStrip.Items.Add("フォントサイズ:")
$toolStrip.Items.Add($fontSizeCombo)
# 変更のデバウンス用タイマー（入力の度に毎回変換し過ぎない）
$timer = New-Object System.Windows.Forms.Timer
$timer.Interval = 200
$timer.Add_Tick({
$timer.Stop()
try {
$md = $editor.Text
if ([string]::IsNullOrWhiteSpace($md)) {
$preview.DocumentText = "<html><head><meta charset='utf-8'></head><body><i>ここにプレビューが表示されます</i></body></html>"
$lbl.Text = "Empty"
} else {
# 文字列から変換する時は -InputObject を使う
# $html = (ConvertFrom-Markdown -InputObject $md -AsHtml).Html
$html = (ConvertFrom-Markdown -InputObject $md).Html
# ちょっとした既定のスタイル
$css = @"
body { font-family: 'Segoe UI', Meiryo, sans-serif; line-height: 1.6; margin: 16px; }
pre, code { font-family: Consolas, 'MeiryoKe_Console', monospace; }
pre { background: #f6f8fa; padding: 12px; overflow: auto; }
code { background: #f6f8fa; padding: 2px 4px; }
h1, h2, h3 { border-bottom: 1px solid #eaecef; padding-bottom: .3em; }
table { border-collapse: collapse; }
table, th, td { border: 1px solid #dfe2e5; }
th, td { padding: 6px 13px; }
blockquote { color: #6a737d; border-left: 4px solid #dfe2e5; margin: 0; padding: 0 1em; }
"@
$doc = @"
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>$css</style>
</head>
<body>
$html
</body>
</html>
"@
$preview.DocumentText = $doc
$lbl.Text = "Rendered"
}
} catch {
$preview.DocumentText = "<html><head><meta charset='utf-8'></head><body><b>変換エラー:</b> $($_.Exception.Message)</body></html>"
$lbl.Text = "Error"
}
})
# エディタ変更イベントでタイマー再始動
$editor.Add_TextChanged({
$timer.Stop()
$timer.Start()
})
# 初期テキスト
$editor.Text = @"
# ようこそ
- 左側に Markdown を入力
- 右側にリアルタイムでプレビュー
`**太字**`, `コード`, 表、引用などを試してみてください。
"@
# レイアウト構築
$split.Panel1.Controls.Add($editor)
$split.Panel2.Controls.Add($preview)
$form.Controls.Add($split)
$form.Controls.Add($toolStrip)
$form.MainMenuStrip = $menu
# 初期レンダリングをキック
$null = $editor.Focus()
$timer.Start()
$form.Add_Shown({
$split.SplitterDistance = $form.ClientSize.Width / 2
})
[System.Windows.Forms.Application]::EnableVisualStyles()
[System.Windows.Forms.Application]::Run($form)
呼び出し方法
@echo off
pwsh.exe -ExecutionPolicy RemoteSigned -File "上記.ps1ファイルのフルパス"