Skip to content

Instantly share code, notes, and snippets.

@tomoko523

tomoko523/railsbiginnerNo7_public.md

Last active October 22, 2015 10:39
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save tomoko523/a6c7cd7e0bfe8bf11497 to your computer and use it in GitHub Desktop.
Save tomoko523/a6c7cd7e0bfe8bf11497 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
railsbiginnerNo7_public.md

#Rails+Markdownでなにかつくる ##Step1 Markdownエディタ編

produced by hirata tomoko

Ruby / Ruby on Rails ビギナーズ勉強会 第７回 #coedorb

はじめに

運営者の平田智子です。

今回は、時間がなかったMarkdownの練習のためにいつもとスライドの作りが違います。見にくかったらすみません><

内容は、後日まとめなおしてSlideShreにあげるかBlogにあげます。

( ‘ ω‘) < Markdownで簡単にLT用のスライドを作れるようになりたいなー

Step構成

Step1. Markdownエディタ

Step2. Markdownメモ

Step3. Markdownからスライド作成

Markdownについて

Markdown（マークダウン）は、文書を記述するための軽量マークアップ言語のひとつである。 もとはプレーンテキスト形式で手軽に書いた文書からHTMLを生成するために開発された。 現在ではHTMLのほかパワーポイント形式やLaTeX形式のファイルへ変換するソフトウェア（コンバータ）も開発されている。

Markdown - ウィキペディア

Markdownパーサについて

redcarpet

Github

Redcarpet is a Ruby library for Markdown processing that smells like butterflies and popcorn.

marked.js

Github

A full-featured markdown parser and compiler, written in JavaScript. Built for speed.

Rails & Gem

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">

Source・View

\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>

Source・Controller

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

※$gｔとなっている部分は>です（＞＜）

Study

Rails

  • generateは便利
  • 外部JS/CSSの読み込み方法の流れがわかった

AngularJS/CoffeScript

  • 初めてだったので、ドットインストールで基礎固めしました
  • CoffeScriptはjs2.coffeeにお世話になりました

( ‘ ω‘) /

  • 一から全部自分でつくってみることが大事

画面イメージ

Demo

参考URL

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment