AngularJS로 Markdown 표시 (CoffeeSctipt 편)

하고 싶은 것:

연습으로 AngularJS 응용 프로그램을 만들고 있습니다. Yeoman에서 샘플을 만들면, "about"라고 하는 페이지가 생기기 때문에, 여기에는 Markdown에서 쓴 기록을 올리고 싶다...라고 생각한 것이 계기.

덧붙여 이번은 CoffeeScript를 사용하고 있기 때문에, CoffeeScript의 공부용으로 옮겨놓는다는 것이 목표입니다.
기본적으로, 아래의 기사에 전면적으로 신세를졌습니다.

JavaScript에서 Markdown 문서를 보았습니다.

Angular에서 Markdown 보기

이용하기 위한 설정 등

Yeoman을 사용하여 편지지 만들기

언어는 CoffeeScript 기반으로 작성

참고로 해, 편지지의 bower.json에 angular-marked, marked, highlightjs를 추가.

bower.json

{
  "name": "myApp",
  "version": "0.0.0",
  "dependencies": {
    "angular": "^1.3.0",
    "bootstrap-sass-official": "^3.2.0",
    "angular-animate": "^1.3.0",
    "angular-cookies": "^1.3.0",
    "angular-resource": "^1.3.0",
    "angular-route": "^1.3.0",
    "angular-sanitize": "^1.3.0",
    "angular-touch": "^1.3.0",
    "angular-marked": "0.0.12",
    "marked": "~0.3.x",
    "highlightjs": "~8.4.0"
  },
  "devDependencies": {
    "angular-mocks": "^1.3.0"
  },
  "appPath": "app",
  "moduleName": "myApp"
}

bower install 실시.

bower_components/다음에 필요한 것이 배치됩니다.

애플리케이션 설정

JavaScript도 CoffeeScript도 익숙하지 않기 때문에, 고맙은 샘플을 CoffeeScript로 변환하는 곳에서 고생.

여기를 의지로 변환했습니다^^;

htp://js2. 코후에

coffeescript

'use strict'

angular
  .module 'myApp', [
    'ngAnimate',
    'ngCookies',
    'ngResource',
    'ngRoute',   # routing利用
    'ngSanitize',
    'ngTouch',
    'hc.marked' # ここがMarkdown用
]
  .config ($routeProvider) ->
    # angular-route 用のルーティング設定
    $routeProvider
      .when '/',
        templateUrl: 'views/main.html'
        controller: 'MainCtrl'
      .when '/about',
        templateUrl: 'views/about.html'
        controller: 'AboutCtrl'
      .when '/contact',
        templateUrl: 'views/contact.html'
        controller: 'ContactCtrl'
      .otherwise
        # その他のところは、リンクがあってもデフォルト（main）に飛ばされる。
        redirectTo: '/'

  .config [
    # ここがMarkDown用の設定
    'markedProvider'
    (markedProvider) ->
      markedProvider.setOptions
        gfm: true
        tables: true
        highlight: (code) ->
          hljs.highlightAuto(code).value
      return
  ]

Markdown용 구성 요소 지정

실제로는 grunt를 사용하고 있으므로 grunt build에서 index.html에도 다음이 삽입됩니다.

수동으로 해도 좋다고 생각합니다만....

<!-- build:js(.) scripts/vendor.js -->
<!-- bower:js -->

<!-- 中略 -->    
<script src="bower_components/marked/lib/marked.js"></script>
<script src="bower_components/angular-marked/angular-marked.js"></script>
<script src="bower_components/highlightjs/highlight.pack.js"></script>
<!-- endbower -->

about.html 부분을 Markdown으로 작성해보십시오.

<p>This is the about view.</p>
<!-- Yeomanのひな形はここまで -->

<!-- 以下、markedディレクティブで囲んだ部分をMarkdownで記述してみる -->
<marked>
  ### Markdown directive

  *It works!*

  *This* **is** [markdown](https://daringfireball.net/projects/markdown/) in the view.
</marked>

<!-- README.md というファイルもインクルードしてみる -->
<section marked ng-include="'README.md'"></section>

덧붙여 Yeoman의 편지지로 만들어져 있는 디렉토리는 이 구성.
about.html에서 include의 지정을 하고 있습니다만, ng-include로 지정한 파일은, 패스를 지정하지 않으면 index.html와 같은 계층의 것을 읽어 가기 때문에, 일단 주의.

% tree
.
├── 404.html
├── README.md <- ここだと ng-include="'README.md'
├── favicon.ico
├── images
│   └── yeoman.png
├── index.html
├── robots.txt
├── scripts
│   ├── app.coffee
│   └── controllers
│       ├── about.coffee
│       ├── contact.coffee
│       └── main.coffee
├── styles
│   └── main.scss
└── views
    ├── WorkMemo.md <- ここだと ng-include="'views/README.md'
    ├── about.html
    ├── contact.html
    └── main.html

5 directories, 15 files

결과

grunt에서 LiveReload하고 있기 때문에 바로 확인 ....
일단 잘 갔다.

시도해 봅니다.

간단한 일기라면, 일기 부분만 Markdown으로 써 가는 것이 좋은 것일까? 라고 생각했습니다. (이미 이런 것 같지만 ...)

ng-include의 경우, ****.md (마크 다운의 파일 측)를 변경해도 grunt는 변경을 인식하지 못했기 때문에 Gruntfile.js를 조정했습니다. ..

livereload: {
        options: {
          livereload: '<%= connect.options.livereload %>'
        },
        files: [
          '<%= yeoman.app %>/{,*/}*.html',
          '.tmp/styles/{,*/}*.css',
          '.tmp/scripts/{,*/}*.js',
          '<%= yeoman.app %>/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}',
          '<%= yeoman.app %>/{,*/}*.md' # ここ追加。
        ]
      }

위의 설정 조정 후, include한 *.md 파일을 갱신해도 라이브 로드로 컴파일 다시 해 줍니다. 뭐, 이 근처도 정도 문제라고 하는 것으로....

Running "watch" task
Waiting...
>> File "Gruntfile.js" changed.
>> File "app/README.md" changed.
Completed in 0.000s at Mon Apr 20 2015 08:26:36 GMT+0900 (JST) - Waiting...

참고 정보

htp://js. s ぢ 오 킨 g m. 코 m / 앙구 rjs / 응 g_ ぢ 레 c 치 ゔ ぇ / 응 g_ 응 c ぅ (ng-include)