Webサイトにマークダウンエディタを組み込みたい。そうだ!「SimpleMDE」を使おう! | unitopi – ユニトピ –

どうもイマグマです。 タイトルみたいな状況、よくありますよね? 今回は、JavaScriptで簡単にサイトにマークダウンエディタが組み込める「SimpleMDE」とマークダウン記法の文書の表示時の変換ライブラリ「Marked」をご紹介します。 SimpleMDEとは JavaScript製のマークダウンエディタです。 SimpleMDE is a simple, embeddable, and beautiful JS markdown editor SimpleMDE 使用感はDemoページでお試しください。 特徴 書きながら何となくスタイルが分かる シンプルでそれでいて編集中の文字のスタイリングもそこそこ美しいのです。 ツールバーが付いている ツールバーも標準で付いているので、記法を忘れたときにも優しいですね。 フルスクリーン表示とリアルタイムプレビュー 行数や単語数が標準でフッターに表示される エディタらしさであり、意外と便利機能でもあるステータスフッターが標準でついています。 埋め込みが簡単。オプションも豊富。 README.mdを見ていただければ分かると思いますが、埋め込みはとっても簡単です。 さらに、多彩なオプションで色んなことができます。 よく使いそうなものだけ後ほど説明します! 公式ドキュメント 早速サイトに埋め込む こんなHTMLを用意しました。 test </script

情報源: Webサイトにマークダウンエディタを組み込みたい。そうだ!「SimpleMDE」を使おう! | unitopi – ユニトピ –

Bitbucket や GitHub で自動デプロイするためのサンプル PHP スクリプトを拾って改造してみた – アルケミスタの住人

Tweet GitHub や Bitbucket などの Git ホスティングサービスの Hook や Webhook サービスを使って、Git に Push した時、自動的にサーバー側で最新版の master ブランチ […]

情報源: Bitbucket や GitHub で自動デプロイするためのサンプル PHP スクリプトを拾って改造してみた – アルケミスタの住人

HTMLに動的にdivや文字列、input form、textareaなどを追加する方法 – ゆっくり備忘録

動的に追加したいときってありますよね。ボタンをぽちっと押すと、新しいフォームが出てきたりとか。そんなん作りました。 具体例←開いてみてください ソース↓ ↑の簡単な解説: function add() 1行目↓: ↑createElement で、div要素を作成して、div_element に格納しました。 function add() 2行目↓: ↑先ほど作成した、div_element のなかに HTML を書き込んでいます。input や textarea、文字列でもなんでも詰め込み放題です。 function add() 3行目↓: ↑id=piyoの要素を捕まえています。具体例のHTMLのソースを見ると分かると思いますが、 ↑と、なっている箇所があります。ここのdivのidがpiyoなので、この要素を取得しています。parent_objectという変数に格納していますが、先ほど頑張って新しく作ったdiv要素を入れる箱になります。 function add() 4行目↓: ↑先ほど作ったdiv_elementを、parent_object、つまりid=piyoのdivに詰め込んでいます。

情報源: HTMLに動的にdivや文字列、input form、textareaなどを追加する方法 – ゆっくり備忘録

CSS3 アニメーション(使い方やサンプル)/Web Design Leaves

CSS3 アニメーションの使い方やサンプル、解説等。transition の設定方法, 簡単なロールオーバー, transition のプロパティ, transition-timing-function, クリックで transition /CSS, クリックで transition /jQuery, transform, animation の設定方法, キーフレーム @keyframes, animation のプロパティ, アニメーション開始のきっかけ, :hover で開始, クリックで開始(jQuery), スクロールで開始(jQuery), ホバーで開始(jQuery), 複数のキーフレームの適用, Animate.css, クリックでアニメーション, ホバーでアニメーション, スクロールでアニメーション, マウスオーバー時のエフェクト。

情報源: CSS3 アニメーション(使い方やサンプル)/Web Design Leaves