多機能メモソフトを公開(マークダウン)
更新詳細
25/01/31
リンク機能の実装
開いたファイルの履歴が残るようになりました。
別記事でリンクについて解説してます
25/01/30
独自マークダウンの仕様変更を行いました。
htmlコンバート機能を作成しました
独自マークダウンで作成できなかった写真や動画のリンクを作成できるようになりました
25/01/28
今配布中のエディタは初期バージョンから
10回目ほど改良したものです。
追記
textboxなどのプロトタイプ宣言をせずにコーディングしていたことが判明。
致命的。
すぐに修正した。
ウィンドウの真ん中に幅を変更する用の領域を設置。
テキストエディタの背景色を黒に変更
テンプレート機能を実装。
ファイルを開いたらすぐに名前を付けて保存する処理を追加。
25/01/27
バグ治りました。
独自マークアップが、コメントアウトしたいときに自身を変換してしまう問題
を解決しました
初期文字列が改行されていない問題を解決しました。
コメントアウトの仕様について微調整しました。
ここ'''
'''ここ
に改行を入れる仕様としています。
25/01/26
バグが見つかったので、あまり使えません
至急直します。
markdigを用いているので、タグ関連はそちらを参照してください。
メモソフトの概要
マークダウンを用いたメモソフトを作成しました。
簡単にきれいな文書を作成できます。
マークダウンとは??
ウェブサイトのような見た目に文章を成形してくれるツールです。
ウェブサイトを表示するにはHTMLというものを覚える必要がありますが、
それは覚えるのが大変です。マークダウンでは、それを簡単な記号に置き換えて、だれでも使いやすいようにしています。
例、見出しは#で表現します
今回作ったソフトの特徴
- UI周りがシンプルである
- 改行時にViewを更新(モード変更可能)
- デザインを変更する機能がある
詳細
- ドラッグアンドドロップ対応
- Ctrl + S 保存
- Ctrl + O 開く
- Ctrl + T テンプレートを開いて別名で保存
- F5 更新
- F4 CSS読み込み
ソフト起動時、もしくは、ファイルを開くときに
クリップボード内を解析し、CSSのファイルパスで読み込みます。
注意として内容自体はコピーしても読み込めません。
CSSの読み込み詳細
クリップボードの中がCSSのpath場合には、それを参照します。
それ以外の場合は無視されます。普段使いでパスをコピーすることはほぼないので誤って参照されることはないと思います。
そのパスは、保存されるので次回以降は設定する必要はありません。
例:
C:\Users----\Downloads\markdown\style.css
パスをコピーで大丈夫です。
読み込み用のボタンを実装しなかったのは、技術力がないのもそうですが、あまりUIを増やしたくなかったのが大きいです。ほかのツールですと、UIがすごい主張をしていることが多かったので、そのような形にしました。
自分が欲しいと思えるものができたと思います。
ぜひ使っていただけると嬉しいです。
独自マークダウンの紹介(追記01/30)
当初はマークダウンにクラス要素がないと思い製作を開始しましたが、ありましたので、廃止を検討しました。しかし、MarDownのclassの記述ではどこまでを囲っているのかがわかりにくいという欠点があり、廃止すべきか今迷っている所です。
クラス
ユーザ独自のクラスを設定できます
上のエディタの写真のメモクラスがそれにあたります。
::: memo
:::
このようにmdでは書きますが、囲った場所がわかりにくいので、このエディタでは
[.memo]{
}
と記述できるよう拡張しています。(htmlも入力できます)
CSSについての補足説明
CSSは、デザインを決定するための言語です。
もともと、構造を記述するHTMLの中にどのように表示するかの情報を書いていましたが、使いまわしが利くように別のファイルに分ける形になったのがCSSです。
例えば、pという段落を表すタグがあるのですが、これに対して、装飾がしたい場合は、
p{
font-size: 20px; /* 文字サイズ指定 */
color: #2196F3; /* 文字色指定 */
}
のように書きます。
CSSとしてファイルを別にしておけば、このファイルを参照するだけで同じスタイルを共有できます。メモ帳で書いて、(任意の名前).cssで保存してください。
.memo {
position: relative;
border: 3px dashed #000055;
border-radius: 5px;
margin: 20px 0;
padding: 40px 20px 5px 20px;
}
.memo::before {
content: "MEMO";
position: absolute;
background-color: #fff;
color: #000055;
font-weight: bold;
left: 20px;
top: -23px;
padding: 10px;
}
上記の写真のmemoクラスで使用しているcss
「 CSSコピペ 」等で検索してみることをお勧めします。
Discussion