자유게시판

제목 ci로 처음 만드는 프로젝트!!
글쓴이 테러보이 작성시각 2016/04/29 13:33:28
댓글 : 3 추천 : 0 스크랩 : 0 조회수 : 14314   RSS
테러보이

드디어 개인적으로 ci를 활용하여 무엇을 만들어 보자는 목표를 정해졌습니다.

gitbook같은 mdbook입니다.

<?php
/*
php >= 5.3.0
*/
include_once('class/Parsedown.php'); // https://github.com/erusev/parsedown
$md = new Parsedown();
?>
<!doctype html>
<html lang="ko">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
        
        <title>마크다운테스트</title>

        <link rel="stylesheet" href="css/github_custom.css">
        <style>
            .markdown-wrap {
                width:920px;
                border: 1px solid #ddd;
                outline: 1300px solid #fff;
                margin: 16px auto;
            }
        </style>
    </head>
    <body>
        <div class="markdown-wrap">
            <div class="md-add"><?php echo $md->text(file_get_contents('md/테스트.md')); ?></div>
        </div>
    </body>
</html>

일단 1차적으로 MD파일을 불러와 출력 하는것을 생으로 만들어 두었는데요. (이작업은 기존에 여러번 해서 ㅎㅎ)

이런식으로 쓰다보니 cms형태로 만들어 보는것도 좋겠다 싶어서 ㅎㅎㅎ

 

무튼 ci를 모르는 저로서는 큰도전이 되지 않을까 싶네요 ㅎㅎ

 

css/github_custom.css
.md-add {
  padding: 30px;
}
@font-face {
  font-family: octicons-anchor;
  src: url(data:font/woff;charset=utf-8;base64,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) format('woff');
}

.md-add {
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  color: #333;
  overflow: hidden;
  font-family: "Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  word-wrap: break-word;
}

.md-add a {
  background: transparent;
}

.md-add a:active,
.md-add a:hover {
  outline: 0;
}

.md-add strong {
  font-weight: bold;
}

.md-add h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

.md-add img {
  border: 0;
}

.md-add hr {
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  height: 0;
}

.md-add pre {
  overflow: auto;
}

.md-add code,
.md-add kbd,
.md-add pre {
  font-family: monospace, monospace;
  font-size: 1em;
}

.md-add input {
  color: inherit;
  font: inherit;
  margin: 0;
}

.md-add html input[disabled] {
  cursor: default;
}

.md-add input {
  line-height: normal;
}

.md-add input[type="checkbox"] {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0;
}

.md-add table {
  border-collapse: collapse;
  border-spacing: 0;
}

.md-add td,
.md-add th {
  padding: 0;
}

.md-add * {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.md-add input {
  font: 13px/1.4 Helvetica, arial, freesans, clean, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
}

.md-add a {
  color: #4183c4;
  text-decoration: none;
}

.md-add a:hover,
.md-add a:focus,
.md-add a:active {
  text-decoration: underline;
}

.md-add hr {
  height: 0;
  margin: 15px 0;
  overflow: hidden;
  background: transparent;
  border: 0;
  border-bottom: 1px solid #ddd;
}

.md-add hr:before {
  display: table;
  content: "";
}

.md-add hr:after {
  display: table;
  clear: both;
  content: "";
}

.md-add h1,
.md-add h2,
.md-add h3,
.md-add h4,
.md-add h5,
.md-add h6 {
  margin-top: 15px;
  margin-bottom: 15px;
  line-height: 1.1;
}

.md-add h1 {
  font-size: 30px;
}

.md-add h2 {
  font-size: 21px;
}

.md-add h3 {
  font-size: 16px;
}

.md-add h4 {
  font-size: 14px;
}

.md-add h5 {
  font-size: 12px;
}

.md-add h6 {
  font-size: 11px;
}

.md-add blockquote {
  margin: 0;
}

.md-add ul,
.md-add ol {
  padding: 0;
  margin-top: 0;
  margin-bottom: 0;
}

.md-add ol ol,
.md-add ul ol {
  list-style-type: lower-roman;
}

.md-add ul ul ol,
.md-add ul ol ol,
.md-add ol ul ol,
.md-add ol ol ol {
  list-style-type: lower-alpha;
}

.md-add dd {
  margin-left: 0;
}

.md-add code {
  font: 12px Consolas, "Liberation Mono", Menlo, Courier, monospace;
}

.md-add pre {
  margin-top: 0;
  margin-bottom: 0;
  font: 12px Consolas, "Liberation Mono", Menlo, Courier, monospace;
}

.md-add .octicon {
  font: normal normal 16px octicons-anchor;
  line-height: 1;
  display: inline-block;
  text-decoration: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.md-add .octicon-link:before {
  content: '\f05c';
}

.md-add>*:first-child {
  margin-top: 0 !important;
}

.md-add>*:last-child {
  margin-bottom: 0 !important;
}

.md-add .anchor {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  display: block;
  padding-right: 6px;
  padding-left: 30px;
  margin-left: -30px;
}

.md-add .anchor:focus {
  outline: none;
}

.md-add h1,
.md-add h2,
.md-add h3,
.md-add h4,
.md-add h5,
.md-add h6 {
  position: relative;
  margin-top: 1em;
  margin-bottom: 16px;
  font-weight: bold;
  line-height: 1.4;
}

.md-add h1 .octicon-link,
.md-add h2 .octicon-link,
.md-add h3 .octicon-link,
.md-add h4 .octicon-link,
.md-add h5 .octicon-link,
.md-add h6 .octicon-link {
  display: none;
  color: #000;
  vertical-align: middle;
}

.md-add h1:hover .anchor,
.md-add h2:hover .anchor,
.md-add h3:hover .anchor,
.md-add h4:hover .anchor,
.md-add h5:hover .anchor,
.md-add h6:hover .anchor {
  padding-left: 8px;
  margin-left: -30px;
  line-height: 1;
  text-decoration: none;
}

.md-add h1:hover .anchor .octicon-link,
.md-add h2:hover .anchor .octicon-link,
.md-add h3:hover .anchor .octicon-link,
.md-add h4:hover .anchor .octicon-link,
.md-add h5:hover .anchor .octicon-link,
.md-add h6:hover .anchor .octicon-link {
  display: inline-block;
}

.md-add h1 {
  padding-bottom: 0.3em;
  font-size: 2.25em;
  line-height: 1.2;
  border-bottom: 1px solid #eee;
}

.md-add h2 {
  padding-bottom: 0.3em;
  font-size: 1.75em;
  line-height: 1.225;
  border-bottom: 1px solid #eee;
}

.md-add h3 {
  font-size: 1.5em;
  line-height: 1.43;
}

.md-add h4 {
  font-size: 1.25em;
}

.md-add h5 {
  font-size: 1em;
}

.md-add h6 {
  font-size: 1em;
  color: #777;
}

.md-add p,
.md-add blockquote,
.md-add ul,
.md-add ol,
.md-add dl,
.md-add table,
.md-add pre {
  margin-top: 0;
  margin-bottom: 16px;
}

.md-add hr {
  height: 4px;
  padding: 0;
  margin: 16px 0;
  background-color: #e7e7e7;
  border: 0 none;
}

.md-add ul,
.md-add ol {
  padding-left: 2em;
}

.md-add ul ul,
.md-add ul ol,
.md-add ol ol,
.md-add ol ul {
  margin-top: 0;
  margin-bottom: 0;
}

.md-add li>p {
  margin-top: 16px;
}

.md-add dl {
  padding: 0;
}

.md-add dl dt {
  padding: 0;
  margin-top: 16px;
  font-size: 1em;
  font-style: italic;
  font-weight: bold;
}

.md-add dl dd {
  padding: 0 16px;
  margin-bottom: 16px;
}

.md-add blockquote {
  padding: 0 15px;
  color: #777;
  border-left: 4px solid #ddd;
}

.md-add blockquote>:first-child {
  margin-top: 0;
}

.md-add blockquote>:last-child {
  margin-bottom: 0;
}

.md-add table {
  display: block;
  width: 100%;
  overflow: auto;
  word-break: normal;
  word-break: keep-all;
}

.md-add table th {
  font-weight: bold;
}

.md-add table th,
.md-add table td {
  padding: 6px 13px;
  border: 1px solid #ddd;
}

.md-add table tr {
  background-color: #fff;
  border-top: 1px solid #ccc;
}

.md-add table tr:nth-child(2n) {
  background-color: #f8f8f8;
}

.md-add img {
  max-width: 100%;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.md-add code {
  padding: 0;
  padding-top: 0.2em;
  padding-bottom: 0.2em;
  margin: 0;
  font-size: 85%;
  background-color: rgba(0,0,0,0.04);
  border-radius: 3px;
}

.md-add code:before,
.md-add code:after {
  letter-spacing: -0.2em;
  content: "\00a0";
}

.md-add pre>code {
  padding: 0;
  margin: 0;
  font-size: 100%;
  word-break: normal;
  white-space: pre;
  background: transparent;
  border: 0;
}

.md-add .highlight {
  margin-bottom: 16px;
}

.md-add .highlight pre,
.md-add pre {
  padding: 16px;
  overflow: auto;
  font-size: 85%;
  line-height: 1.45;
  background-color: #f7f7f7;
  border-radius: 3px;
}

.md-add .highlight pre {
  margin-bottom: 0;
  word-break: normal;
}

.md-add pre {
  word-wrap: normal;
}

.md-add pre code {
  display: inline;
  max-width: initial;
  padding: 0;
  margin: 0;
  overflow: initial;
  line-height: inherit;
  word-wrap: normal;
  background-color: transparent;
  border: 0;
}

.md-add pre code:before,
.md-add pre code:after {
  content: normal;
}

.md-add .highlight {
  background: #fff;
}

.md-add .highlight .h {
  color: #333;
  font-style: normal;
  font-weight: normal;
}

.md-add .highlight .mf,
.md-add .highlight .mh,
.md-add .highlight .mi,
.md-add .highlight .mo,
.md-add .highlight .il,
.md-add .highlight .m {
  color: #945277;
}

.md-add .highlight .s,
.md-add .highlight .sb,
.md-add .highlight .sc,
.md-add .highlight .sd,
.md-add .highlight .s2,
.md-add .highlight .se,
.md-add .highlight .sh,
.md-add .highlight .si,
.md-add .highlight .sx,
.md-add .highlight .s1 {
  color: #df5000;
}

.md-add .highlight .kc,
.md-add .highlight .kd,
.md-add .highlight .kn,
.md-add .highlight .kp,
.md-add .highlight .kr,
.md-add .highlight .kt,
.md-add .highlight .k,
.md-add .highlight .o {
  font-weight: bold;
}

.md-add .highlight .kt {
  color: #458;
}

.md-add .highlight .c,
.md-add .highlight .cm,
.md-add .highlight .c1 {
  color: #998;
  font-style: italic;
}

.md-add .highlight .cp,
.md-add .highlight .cs,
.md-add .highlight .cp .h {
  color: #999;
  font-weight: bold;
}

.md-add .highlight .cs {
  font-style: italic;
}

.md-add .highlight .n {
  color: #333;
}

.md-add .highlight .na,
.md-add .highlight .nv,
.md-add .highlight .vc,
.md-add .highlight .vg,
.md-add .highlight .vi {
  color: #008080;
}

.md-add .highlight .nb {
  color: #0086B3;
}

.md-add .highlight .nc {
  color: #458;
  font-weight: bold;
}

.md-add .highlight .no {
  color: #094e99;
}

.md-add .highlight .ni {
  color: #800080;
}

.md-add .highlight .ne {
  color: #990000;
  font-weight: bold;
}

.md-add .highlight .nf {
  color: #945277;
  font-weight: bold;
}

.md-add .highlight .nn {
  color: #555;
}

.md-add .highlight .nt {
  color: #000080;
}

.md-add .highlight .err {
  color: #a61717;
  background-color: #e3d2d2;
}

.md-add .highlight .gd {
  color: #000;
  background-color: #fdd;
}

.md-add .highlight .gd .x {
  color: #000;
  background-color: #faa;
}

.md-add .highlight .ge {
  font-style: italic;
}

.md-add .highlight .gr {
  color: #aa0000;
}

.md-add .highlight .gh {
  color: #999;
}

.md-add .highlight .gi {
  color: #000;
  background-color: #dfd;
}

.md-add .highlight .gi .x {
  color: #000;
  background-color: #afa;
}

.md-add .highlight .go {
  color: #888;
}

.md-add .highlight .gp {
  color: #555;
}

.md-add .highlight .gs {
  font-weight: bold;
}

.md-add .highlight .gu {
  color: #800080;
  font-weight: bold;
}

.md-add .highlight .gt {
  color: #aa0000;
}

.md-add .highlight .ow {
  font-weight: bold;
}

.md-add .highlight .w {
  color: #bbb;
}

.md-add .highlight .sr {
  color: #017936;
}

.md-add .highlight .ss {
  color: #8b467f;
}

.md-add .highlight .bp {
  color: #999;
}

.md-add .highlight .gc {
  color: #999;
  background-color: #EAF2F5;
}

.md-add kbd {
  background-color: #e7e7e7;
  background-image: -webkit-linear-gradient(#fefefe, #e7e7e7);
  background-image: linear-gradient(#fefefe, #e7e7e7);
  background-repeat: repeat-x;
  display: inline-block;
  padding: 3px 5px;
  font: 11px Consolas, "Liberation Mono", Menlo, Courier, monospace;
  line-height: 10px;
  color: #000;
  border: 1px solid #cfcfcf;
  border-radius: 2px;
}

.md-add .highlight .pl-coc,
.md-add .highlight .pl-entm,
.md-add .highlight .pl-eoa,
.md-add .highlight .pl-mai .pl-sf,
.md-add .highlight .pl-pdv,
.md-add .highlight .pl-sc,
.md-add .highlight .pl-sr,
.md-add .highlight .pl-v,
.md-add .highlight .pl-vpf {
  color: #0086b3;
}

.md-add .highlight .pl-eoac,
.md-add .highlight .pl-mdht,
.md-add .highlight .pl-mi1,
.md-add .highlight .pl-mri,
.md-add .highlight .pl-va,
.md-add .highlight .pl-vpu {
  color: #008080;
}

.md-add .highlight .pl-c,
.md-add .highlight .pl-pdc {
  color: #b4b7b4;
  font-style: italic;
}

.md-add .highlight .pl-k,
.md-add .highlight .pl-ko,
.md-add .highlight .pl-kolp,
.md-add .highlight .pl-mc,
.md-add .highlight .pl-mr,
.md-add .highlight .pl-ms,
.md-add .highlight .pl-s,
.md-add .highlight .pl-sok,
.md-add .highlight .pl-st {
  color: #6e5494;
}

.md-add .highlight .pl-ef,
.md-add .highlight .pl-enf,
.md-add .highlight .pl-enm,
.md-add .highlight .pl-entc,
.md-add .highlight .pl-eoi,
.md-add .highlight .pl-sf,
.md-add .highlight .pl-smc {
  color: #d12089;
}

.md-add .highlight .pl-ens,
.md-add .highlight .pl-eoai,
.md-add .highlight .pl-kos,
.md-add .highlight .pl-mh .pl-pdh,
.md-add .highlight .pl-mp,
.md-add .highlight .pl-pde,
.md-add .highlight .pl-stp {
  color: #458;
}

.md-add .highlight .pl-enti {
  color: #d12089;
  font-weight: bold;
}

.md-add .highlight .pl-cce,
.md-add .highlight .pl-enc,
.md-add .highlight .pl-kou,
.md-add .highlight .pl-mq {
  color: #f93;
}

.md-add .highlight .pl-mp1 .pl-sf {
  color: #458;
  font-weight: bold;
}

.md-add .highlight .pl-cos,
.md-add .highlight .pl-ent,
.md-add .highlight .pl-md,
.md-add .highlight .pl-mdhf,
.md-add .highlight .pl-ml,
.md-add .highlight .pl-pdc1,
.md-add .highlight .pl-pds,
.md-add .highlight .pl-s1,
.md-add .highlight .pl-scp,
.md-add .highlight .pl-sol {
  color: #df5000;
}

.md-add .highlight .pl-c1,
.md-add .highlight .pl-cn,
.md-add .highlight .pl-pse,
.md-add .highlight .pl-pse .pl-s2,
.md-add .highlight .pl-vi {
  color: #a31515;
}

.md-add .highlight .pl-mb,
.md-add .highlight .pl-pdb {
  color: #df5000;
  font-weight: bold;
}

.md-add .highlight .pl-mi,
.md-add .highlight .pl-pdi {
  color: #6e5494;
  font-style: italic;
}

.md-add .highlight .pl-ms1 {
  background-color: #f5f5f5;
}

.md-add .highlight .pl-mdh,
.md-add .highlight .pl-mdi {
  font-weight: bold;
}

.md-add .highlight .pl-mdr {
  color: #0086b3;
  font-weight: bold;
}

.md-add .highlight .pl-s2 {
  color: #333;
}

.md-add .highlight .pl-ii {
  background-color: #df5000;
  color: #fff;
}

.md-add .highlight .pl-ib {
  background-color: #f93;
}

.md-add .highlight .pl-id {
  background-color: #a31515;
  color: #fff;
}

.md-add .highlight .pl-iu {
  background-color: #b4b7b4;
}

.md-add .highlight .pl-mo {
  color: #969896;
}

.md-add .task-list-item {
  list-style-type: none;
}

.md-add .task-list-item+.task-list-item {
  margin-top: 3px;
}

.md-add .task-list-item input {
  float: left;
  margin: 0.3em 0 0.25em -1.6em;
  vertical-align: middle;
}

 

https://github.com/erusev/parsedown

수년간 써본 md 파서 중 가장 좋습니다.!

적극 추천 드립니다.

참고로 css는 서브라임에서 뜯어왔습니다 ㅎㅎ

 

파서된 결과물: https://demo.foxrain.me/mark/
 다음글 thinkPHP 프레임워크 개발 해보신 분... 있으셔...
 이전글 요즘 하고 있는 ㅔㅗㅔ(php) 공부입니다. (4)
목록

댓글

변종원(웅파) / 2016/04/29 17:43:12 / 추천 0
화이팅입니다. ^^
테러보이 / 2016/04/29 17:43:52 / 추천 0
@웅파 감사합니다.
양승현 / 2016/04/30 18:35:00 / 추천 0
화이팅이요 .. ㅎㅎ