ラベル StackEdit の投稿を表示しています。 すべての投稿を表示
ラベル StackEdit の投稿を表示しています。 すべての投稿を表示

2015年6月21日日曜日

stackeditでのflow図に関して

stackeditでのflow図に関して

StackEditでの図の書き方

StackEditはフローチャート描画用のflowchart.jsとシーケンス図用のjs-sequence-diagrams.jsが用意されているのでテキストで描画することができます。
描画関係でいろいろ調べるとmermaid.jsが良さそうですが、StackEditは対応していないので、残念です。

フローチャート

基本的には、以下の手順。

Step1. “エイリアス名=>図の種類: コメント”という塊をつくる。
コメントの後には:>httpとすることでリンクをつけることもできる。

部品 図の種類
始点端子 start
終了端子 end
処理部品 operation
判断部品 condition
定義済み処理部品 subroutline
入出力部品 inputoutput

Step2. 作成したエイリアスを接続する順番を記載
上記で動作を記載した後、1行開けてエイリアス名を”->”で接続していく。

[矢印の向き]
右から線を出したい場合: (right)、
左から線を出したい場合: (left)
をエイリアス名の後に記載。

[confitionの処理]
エイリアス名の後に(yes),(no)を記載し、その後の処理を->でつないでいく。矢印の向きも合わせて指定

以下に例を示しておきます。

例1.

 ```flow
 st=>start: 処理開始
 e=>end: 処理終了
 op1=>operation: テスト
 op2=>operation: 補習
 io1=>inputoutput: 点数入力
 cond1=>condition: 点数>80
 cond2=>condition: 点数>70
 cond3=>condition: 点数>60
 sub1=>subroutine: 合格
 (※2):>http://www.google.com
 sub2=>subroutine: 不合格

 st->op1->io1->cond1
 cond1(yes)->sub1
 cond1(no,right)->cond2(no,right)->cond3
 cond2(yes)->op2->sub1
 cond3(yes,right)->op1
 cond3(no)->sub2
 ```
Created with Raphaël 2.1.2処理開始テスト点数入力点数>80合格(※2)点数>70補習点数>60不合格yesnoyesnoyesno

例2.

 ```flow
 io1=>operation: A
 io2=>operation: B
 io3=>operation: C
 io4=>operation: D

 io1(right)->io2->io3(right)->io4
 ```
Created with Raphaël 2.1.2ABCD

シーケンス図

以下のコマンドを使って各項目を接続していきます。
コメントで改行したい場合は、\nを入れること。
また、接続は自分自身に接続することも可能です。

内容 コマンド
タイトル Title:
AからBへ実線三角矢印で接続 A -> B: 説明
AからBへ実線矢印で接続 A ->> B: 説明
AからBへ破線三角矢印で接続 A –> B: 説明
AからBへ破線矢印で接続 A –>> B: 説明
コメント(軸の右側) Note right of 軸名: コメント
コメント(軸の左側) Note left of 軸名: コメント
コメント(軸の上) Note over of 軸名: コメント
 ```sequence
 Title: フローチャート
 Note over Class A: function A1
 Class A->>Class B: アプリ起動
 Note over Class B: function B1
 Class B->Class C: テストA
 Class C-->Class B: OK
 Note over Class A: function A2
 Class A-->>Class D: 
 Class D->Class D:関数D1\nここで実験する。
 Class D->Class D:関数D2\nここで結果。
 ```
Created with Raphaël 2.1.2フローチャートClass AClass AClass BClass BClass CClass CClass DClass Dfunction A1アプリ起動function B1テストAOKfunction A2関数D1ここで実験する。関数D2ここで結果。

2014年12月27日土曜日

StackEditからのBloggerへの投稿でラベルを指定

StackEditからのBloggerへの投稿でラベルを指定

StackEditからBloggerに投稿するときも先頭に以下を記載することでラベルをつけて
投稿が可能です。なんて、便利!

---
tags: ["StackEdit","ラベル"] 
---

GFMのようにコードがハイライトされない

GFMのようにコードがハイライトされない

StackEditを使う理由として、Markdownを書いてGFM(GitHub Flavored Markdown)になることを期待してました。プレビューはちゃんとなってましたし。。
enter image description here

その状態でBloggerに投稿すると以下のように反映されてません。
enter image description here

StackEditのExport to diskでAs HTMLを実施しても同様の結果に。。。

Using templateでExportすると期待通りの結果になりました。
enter image description here

試しにPublishの時もFormatをTemplateにしてみたら意図通りにGFMっぽくなりました。

これで課題がまた1つクリア!

.

StackEditで独自のCSSを使いたい。

StackEditで独自のCSSを使いたい。

はじめに投稿するときのDefault template は以下のようになっていました。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><%= documentTitle %></title>
<link rel="stylesheet" href="https://stackedit.io/res-min/themes/base.css" />
<script type="text/javascript" src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML"></script>
</head>
<body><div class="container"><%= documentHTML %></div></body>
</html>

stylesheetを見てみる。

benweet/stackeditからCSSをダウンロードしてみた。

ここにあるものは、https://stackedit.io/res-min/themesにもあると予想し、まずは、どのcssがよいかを
実験し、以下より一旦base.cssのままとしました。

base.css, default.css: コードの背景は明るいし、文字色も黒
gray.css: 文字色が薄くなる
night.css: コードの背景が暗いし、文字色も灰色。
school.css: まあまあ
solarized-dark: コードの背景が暗いし、文字色も薄い
solarized-light: コードの背景は明るいが、文字色も薄い

stackedit/public/res-min/themes/

cssのリンクの場所を変えてみる。

多分、cssをいじらないと枠の幅は変わらないように思えるので、自分が修正したcssをリンクしてみる。
Google Driveに.cssをおいたので、リンクを取得し、templateに記載したがcssを読めていない。
以下のように少し工夫が必要でした。

  1. 左上にある、赤い「作成」ボタンの隣のボタンをクリックして「ファイル…」を選択し、
    アップロードしたいファイルを選択します。
  2. 選択すると、自動でアップロードが開始されるので、終了するまで待ちます。
  3. アップロードしたファイルを右クリックし、「共有」ボタンをクリックします。
    enter image description here

  4. 「共有するリンク」の「http://docs.google.com/file/d/***/」の*の部分をコピー

  5. 詳細を「アクセスできるユーザ」の部分にある「変更…」をクリックします。
    enter image description here

  6. 「ウェブ上で一般公開」を選択して、「保存」ボタンをクリックします。
      enter image description here

  7. default templateのhrefで「https://www.googledrive.com/host/」に4項でコピーした文字列を結合する。

参考:
GoogleドライブにBloggerで使う外部CSSをホスティングさせてみる

StackEditからBloggerに投稿したら画像とソースコード部分が本文領域からはみでた

StackEditからBloggerに投稿したら画像とソースコード部分が本文領域からはみでた
枠の幅

Formatをtemplateにして、投稿したら枠の部分が画面右のプロフィールのところも突き抜けておりました。

enter image description here

この解決方法をググってみました。

  1. FormatをTemplateして投稿
  2. FormatをHTMLにして投稿
  3. 1回目に投稿したものを削除

参考
StackEditを使ってMarkdown記法の投稿を書いてみた

でもこれだと面倒なので、FormatをTemplate、HTMLそれぞれでExportし、テキストエディタでdiffをとって、確認しました。

その結果、Publishする際に以下のようにCustom templateにして以下のように修正することで一発で画像もコードも本文の枠内に入りました。 めでたし。めでたし
enter image description here

[修正前]

<body><div class="container"><%= documentHTML %></div></body>

[修正後]

<body><%= documentHTML %></body>

2014年12月23日火曜日

StackEditからのBloggerへの投稿でラベルを指定

--- tags: ["StackEdit","ラベル"] --- Welcome to StackEdit! =================== Hey! I'm your first Markdown document in **StackEdit**[^stackedit]. Don't delete me, I'm very helpful! I can be recovered anyway in the **Utils** tab of the **Settings** dialog. ---------- Documents ------------- StackEdit stores your documents in your browser, which means all your documents are automatically saved locally and are accessible **offline!** > **Note:** > - StackEdit is accessible offline after the application has been loaded for the first time. > - Your local documents are not shared between different browsers or computers. > - Clearing your browser's data may **delete all your local documents!** Make sure your documents are synchronized with **Google Drive** or **Dropbox** (check out the [ Synchronization](#synchronization) section). #### Create a document The document panel is accessible using the button in the navigation bar. You can create a new document by clicking **New document** in the document panel. #### Switch to another document All your local documents are listed in the document panel. You can switch from one to another by clicking a document in the list or you can toggle documents using Ctrl+[ and Ctrl+]. #### Rename a document You can rename the current document by clicking the document title in the navigation bar. #### Delete a document You can delete the current document by clicking **Delete document** in the document panel. #### Export a document You can save the current document to a file by clicking **Export to disk** from the menu panel. > **Tip:** Check out the [ Publish a document](#publish-a-document) section for a description of the different output formats. ---------- Synchronization ------------------- StackEdit can be combined with **Google Drive** and **Dropbox** to have your documents saved in the *Cloud*. The synchronization mechanism takes care of uploading your modifications or downloading the latest version of your documents. > **Note:** > - Full access to **Google Drive** or **Dropbox** is required to be able to import any document in StackEdit. Permission restrictions can be configured in the settings. > - Imported documents are downloaded in your browser and are not transmitted to a server. > - If you experience problems saving your documents on Google Drive, check and optionally disable browser extensions, such as Disconnect. #### Open a document You can open a document from **Google Drive** or the **Dropbox** by opening the **Synchronize** sub-menu and by clicking **Open from...**. Once opened, any modification in your document will be automatically synchronized with the file in your **Google Drive** / **Dropbox** account. #### Save a document You can save any document by opening the **Synchronize** sub-menu and by clicking **Save on...**. Even if your document is already synchronized with **Google Drive** or **Dropbox**, you can export it to a another location. StackEdit can synchronize one document with multiple locations and accounts. #### Synchronize a document Once your document is linked to a **Google Drive** or a **Dropbox** file, StackEdit will periodically (every 3 minutes) synchronize it by downloading/uploading any modification. A merge will be performed if necessary and conflicts will be detected. If you just have modified your document and you want to force the synchronization, click the button in the navigation bar. > **Note:** The button is disabled when you have no document to synchronize. #### Manage document synchronization Since one document can be synchronized with multiple locations, you can list and manage synchronized locations by clicking **Manage synchronization** in the **Synchronize** sub-menu. This will let you remove synchronization locations that are associated to your document. > **Note:** If you delete the file from **Google Drive** or from **Dropbox**, the document will no longer be synchronized with that location. ---------- Publication ------------- Once you are happy with your document, you can publish it on different websites directly from StackEdit. As for now, StackEdit can publish on **Blogger**, **Dropbox**, **Gist**, **GitHub**, **Google Drive**, **Tumblr**, **WordPress** and on any SSH server. #### Publish a document You can publish your document by opening the **Publish** sub-menu and by choosing a website. In the dialog box, you can choose the publication format: - Markdown, to publish the Markdown text on a website that can interpret it (**GitHub** for instance), - HTML, to publish the document converted into HTML (on a blog for example), - Template, to have a full control of the output. > **Note:** The default template is a simple webpage wrapping your document in HTML format. You can customize it in the **Advanced** tab of the **Settings** dialog. #### Update a publication After publishing, StackEdit will keep your document linked to that publication which makes it easy for you to update it. Once you have modified your document and you want to update your publication, click on the button in the navigation bar. > **Note:** The button is disabled when your document has not been published yet. #### Manage document publication Since one document can be published on multiple locations, you can list and manage publish locations by clicking **Manage publication** in the menu panel. This will let you remove publication locations that are associated to your document. > **Note:** If the file has been removed from the website or the blog, the document will no longer be published on that location. ---------- Markdown Extra -------------------- StackEdit supports **Markdown Extra**, which extends **Markdown** syntax with some nice features. > **Tip:** You can disable any **Markdown Extra** feature in the **Extensions** tab of the **Settings** dialog. > **Note:** You can find more information about **Markdown** syntax [here][2] and **Markdown Extra** extension [here][3]. ### Tables **Markdown Extra** has a special syntax for tables: Item | Value -------- | --- Computer | $1600 Phone | $12 Pipe | $1 You can specify column alignment with one or two colons: | Item | Value | Qty | | :------- | ----: | :---: | | Computer | $1600 | 5 | | Phone | $12 | 12 | | Pipe | $1 | 234 | ### Definition Lists **Markdown Extra** has a special syntax for definition lists too: Term 1 Term 2 : Definition A : Definition B Term 3 : Definition C : Definition D > part of definition D ### Fenced code blocks GitHub's fenced code blocks are also supported with **Highlight.js** syntax highlighting: ``` // Foo var bar = 0; ``` > **Tip:** To use **Prettify** instead of **Highlight.js**, just configure the **Markdown Extra** extension in the **Settings** dialog. > **Note:** You can find more information: > - about **Prettify** syntax highlighting [here][5], > - about **Highlight.js** syntax highlighting [here][6]. ### Footnotes You can create footnotes like this[^footnote]. [^footnote]: Here is the *text* of the **footnote**. ### SmartyPants SmartyPants converts ASCII punctuation characters into "smart" typographic punctuation HTML entities. For example: | | ASCII | HTML | ----------------- | ---------------------------- | ------------------ | Single backticks | `'Isn't this fun?'` | 'Isn't this fun?' | | Quotes | `"Isn't this fun?"` | "Isn't this fun?" | | Dashes | `-- is en-dash, --- is em-dash` | -- is en-dash, --- is em-dash | ### Table of contents You can insert a table of contents using the marker `[TOC]`: [TOC] ### MathJax You can render *LaTeX* mathematical expressions using **MathJax**, as on [math.stackexchange.com][1]: The *Gamma function* satisfying $\Gamma(n) = (n-1)!\quad\forall n\in\mathbb N$ is via the Euler integral $$ \Gamma(z) = \int_0^\infty t^{z-1}e^{-t}dt\,. $$ > **Tip:** To make sure mathematical expressions are rendered properly on your website, include **MathJax** into your template: ``` ``` > **Note:** You can find more information about **LaTeX** mathematical expressions [here][4]. ### UML diagrams You can also render sequence diagrams like this: ```sequence Alice->Bob: Hello Bob, how are you? Note right of Bob: Bob thinks Bob-->Alice: I am good thanks! ``` And flow charts like this: ```flow st=>start: Start e=>end op=>operation: My Operation cond=>condition: Yes or No? st->op->cond cond(yes)->e cond(no)->op ``` > **Note:** You can find more information: > - about **Sequence diagrams** syntax [here][7], > - about **Flow charts** syntax [here][8]. ### Support StackEdit [![](https://cdn.monetizejs.com/resources/button-32.png)](https://monetizejs.com/authorize?client_id=ESTHdCYOi18iLhhO&summary=true) [^stackedit]: [StackEdit](https://stackedit.io/) is a full-featured, open-source Markdown editor based on PageDown, the Markdown library used by Stack Overflow and the other Stack Exchange sites. [1]: http://math.stackexchange.com/ [2]: http://daringfireball.net/projects/markdown/syntax "Markdown" [3]: https://github.com/jmcmanus/pagedown-extra "Pagedown Extra" [4]: http://meta.math.stackexchange.com/questions/5020/mathjax-basic-tutorial-and-quick-reference [5]: https://code.google.com/p/google-code-prettify/ [6]: http://highlightjs.org/ [7]: http://bramp.github.io/js-sequence-diagrams/ [8]: http://adrai.github.io/flowchart.js/