모노리얼 다이어리 앱을 소개합니다 ^^
앱스토어 : http://goo.gl/Ti93mz
모노리얼 다이어리는 자신을 위해 쓰는 하루 한 편의 글이라는 주제로 세상에 나오게 되었습니다.
앱소개

하루 한 편 나를 위한 글을 쓰세요.

누군가에게 보이기 위한 글이 아닌 자신만을 위한 글.


카페에서 우두커니 누군가를 기다릴 때.

지하철에서 사람들의 모습을 바라보면서.

길에서 우연히 하늘을 올려다봤을 때.

잘 쓸 필요도 없고, 거창할 필요도 없습니다.

나만을 위한 것이니까요.


따뜻한 위로의 글도 좋습니다.

칭찬 섞인 격려의 글도 좋습니다.


우리는 조금 더 자신을 위할 필요가 있습니다.

우린 지금까지도 잘해왔으니까요.



우린 너무 바쁘게 지내고 있습니다.

하루에 한 번쯤은 자신을 위한 위로의 글 하나쯤은 괜찮잖아요.^^


모노리얼은 하나의 사진 위에 간단한 글을 쓸 수 있습니다.

마치 한 장의 사진처럼. 하나의 카드뉴스처럼 글을 볼 수 있습니다.

좌, 우로 쓸어넘기시면 앞 뒤의 글 내용을 볼 수 있습니다.


무슨 생각을 하고 계신가요? 글을 작성해 주세요.


새로운 사진을 부를 수도 있고, 포토라이브러리에서 선택할 수도 있습니다.

사진을 없애고 노트처럼 쓸 수도 있습니다.

사진의 위치와 글의 위치는 드래그해서 위아래를 조정할 수 있습니다.

글쓰기 칸의 사각형들을 위아래로, 화살표를 위아래로 조정하면 위치와 크기를 조정할 수 있습니다.


글씨의 크기, 정렬도 조정하구요.


사진의 흑백처리 여부도 선택할 수 있습니다.

글자의 색, 배경, 뒤쪽의 흐릿한 사진의 투명도까지 조정이 가능합니다.


새로고침 버튼은 최초의 레이아웃으로 조정해줍니다.


설정에서는 기본사진의 흑백처리 여부를 선택할 수 있습니다.

나오는 랜덤이미지의 테마도 고를 수 있습니다.

쓴 글은 iCloud에 백업이 가능합니다.


쓴 글은 목록으로 날짜와 함께 보여지는 단순한 구조를 갖고 있습니다.


위쪽의 연도와 월을 클릭해 보세요. 그 해 그 달에 쓴 글을 볼 수 있습니다.

Any를 선택하시며 모든 기간을 볼 수 있습니다.

연도를 Any 월도 Any 를 선택한다면? 당연히 모든 글을 볼 수 있습니다.^^


작성된 글은 이미지로 다운로드가 가능하며, 공유버튼을 이용해 손쉽게 공유가 가능합니다.

공유버튼을 이용해 페이스북, 또는 트위터에 공유하실 경우 일정기간 광고가 사라지는 기능도 넣었습니다.

광고 제거 결제를 하지 않으셔도 광고 없이 사용이 가능합니다.^^



모노리얼은 흐릿한 기억이라는 매개를 흑백으로 표현하고자 했습니다.

모노리얼을 이용해서 하루 한 편 자신을 위한 글을 써보세요.


칭찬의 글이든, 격려의 글이든.

자신에게 이야기 해보세요.


따뜻한 세상이란건 없을지도 모릅니다.

늘 세상은 그대로 입니다.

이제 우리는 세상을 어떻게 바라볼지 선택해야 합니다.

그 시작은 스스로에게 던지는 아주 작은 위로부터 일겁니다.


모노리얼 : http://goo.gl/Ti93mz



TISTORY에 소스코드를 넣어보자.


구글에서 검색을 해봤는데 사람들은 

Syntax Highlighter 를 사용하는 사람들이 대부분이었습니다. 그래서 필자도 해당 사이트로 날아갔으나,

세상에. Swift가 지원되지 않더군여.

저희 팀에서는 주로 MEAN을 위한 javascript 와 iOS App을 위한 swift 를 사용하고 있습니다.

그래서 swift 소스코드를 추가하는 기능이 필요한건데... 그래서 조금 더 찾아보니.

https://highlightjs.org/ 에서 제공을 해준다고 합니다.

Swift도 있고 CDN도 지원을 해주는 듯 싶었으나.... CDN 버젼에서는 Swift를 지원하지 않더군요.

그래서 어쩔 수 없이 다운로드해서 업로드 하는 방식으로 써야했습니다.

common에서 지원해주는 언어에 사용하시는 언어들이 들어있다면 단순히 cdn의 주소만 넣는 방식으로 쓰시면 편할듯합니다.


전체 순서는

1. 사이트에서 관련 파일 다운로드

2. 티스토리에 업로드

3. 코드 추가


1. 사이트로 이동 https://highlightjs.org/ Get version x.x.x 를 클릭합니다.


2. 아래처럼 cdnjs 주소도 보이는데여. 아래 common에 있는 언어만 사용하신다면 그냥 저 cdn 주소만 사용하셔도 됩니다.


아래는 기본적으로 제공해주는 언어의 목록입니다. cdn에서도 22개의 언어에 대해서 제공해주고 있으니,

이 안에 목록에 포함되실 경우 파일 다운로드 없이 위의 cdn주소만 추가해서 사용하셔도 됩니다.


전 Swift 가 필요했으므로, 아래쪽에 Custom에서 Swift 체크 후 다운로드 했습니다.


그러구나서 압축을 풀고. 티스토리 관리자 페이지로 갑니다.

아래 HTML/CSS 편집 메뉴를 클릭해줍니다.


파일업로드를 클릭해주시고, 아까 다운받은 파일에서 압축해제 했던 파일 중.

highlight.pack.js 파일과 style 폴더 안에 있는 원하는 스타일의 파일을 업로드 해줍니다.

전 스타일 고르기 귀찮아서 일단 다 업로드 했습니다.


이제 코드를 추가해줘야 합니다. HTML 버튼을 클릭해 줍니다.


아래 <link>와 <script> 태그들 사이에 아래 소스를 붙여줍니다.

물론 css 스타일은 default.css 가 아닌 원하는 스타일 파일로 작성해 주시면 됩니다.

개인적으로 default를 좋아해서 저흰 그냥 default ^^

<link rel="stylesheet" href="./images/default.css">
<script src="./images/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

이렇게여.


설정할 부분은 끝이 났고, 이제 사용만 하시면 됩니다.



사용법은 글 작성시 글 작성란에서 HTML 체크박스를 체크해주시고,


작성법은


<pre><code class="swift">//소스 코드

NSLog("Hello World!")

</code></pre>


라고 작성하시면 됩니다.


그러면 결과가.

//소스 코드
NSLog("Hello World!")

이렇게 나옵니다.


 class에는 자신이 표현하고자 하는 언어를 넣어주시면 됩니다.

그러면 글 보기를 할 때 해당 언어에 맞게 이뿌게 표시됩니다.


감사합니다.

  1. 3794 2017.04.02 15:58 신고

    highlightjs 가 좋네요ㅋ 제 블로그에 설치 했습니다. 감사합니다.

+ Recent posts