#Rails+Markdownでなにかつくる ##Step1 Markdownエディタ編
Ruby / Ruby on Rails ビギナーズ勉強会 第7回 #coedorb
Markdown(マークダウン)は、文書を記述するための軽量マークアップ言語のひとつである。 もとはプレーンテキスト形式で手軽に書いた文書からHTMLを生成するために開発された。 現在ではHTMLのほかパワーポイント形式やLaTeX形式のファイルへ変換するソフトウェア(コンバータ)も開発されている。
Redcarpet is a Ruby library for Markdown processing that smells like butterflies and popcorn.
A full-featured markdown parser and compiler, written in JavaScript. Built for speed.
rails new sc_an
rails g controller templates
Gemfile
gem 'marked-rails'
gem 'github-css-rails', '~> 1.1.3'
gem 'bootstrap-sass', '2.3.2.0'
#js&css
\vendor\assets\javascripts
angular.min.js
angular.min.js.map
marked.js
highlight-8.8.0.js
\assets\javascripts\app.coffee\application.js
//= require angular.min
//= require app
//= require marked
//= require highlight-8.8.0
\app\assets\stylesheets\application.css
*= require github-css-rails
\app\assets\stylesheets\custom.css.scss
@import "bootstrap";
\app\views\templates\index.html.erb
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.8.0/styles/solarized_dark.min.css">
\app\views\layouts\application.html.erb
<html ng-app="sampleApp">
\app\views\templates\index.html.erb
<div class='content-new' ng_controller='parsedMarkdownCtrl'>
<div class="col-xs-6">
<textarea class="left" ng_change="parseMarkdown()" ng_model="content" placeholder="入力してください" name="note[content]" id="note_content" rows="35" cols="80">
</textarea>
</div>
<div class="col-xs-6">
<div class='right' id='preview'></div>
</div>
</div>
AngularJSの部分
\assets\javascripts\app.coffee
app = angular.module('sampleApp', [])
\assets\javascripts\controllers\parsedMarkdownCtrl.coffee
angular.module('sampleApp').controller "parsedMarkdownCtrl", ($scope) ->
$scope.parseMarkdown = ->
marked.setOptions langPrefix: ''
$("#preview").html(marked($scope.content))
$('#preview pre code').each (i, e) ->
hljs.highlightBlock e, e.className
return
※$gtとなっている部分は>です(><)
- generateは便利
- 外部JS/CSSの読み込み方法の流れがわかった
- 初めてだったので、ドットインストールで基礎固めしました
- CoffeScriptはjs2.coffeeにお世話になりました
- 一から全部自分でつくってみることが大事
Demo