気ままなタンス*プログラミングなどのノートブック

プログラミングやRPGツクール、DTM、VOCALOIDについてのんびり書きます。

【雑記】Markitupの見た目(skin)をカスタマイズする

Markitupとは

markItUp! Universal Markup jQuery Editor

スタイルをカスタマイズする

Bitbucket風のスキンにしてみた

before

f:id:rinne_grid2_1:20150526070742p:plain

after

f:id:rinne_grid2_1:20150526070750p:plain

実際のコード

markitup/sets/markdown/set.js
// -------------------------------------------------------------------
// markItUp!
// -------------------------------------------------------------------
// Copyright (C) 2008 Jay Salvat
// http://markitup.jaysalvat.com/
// -------------------------------------------------------------------
// MarkDown tags example
// http://en.wikipedia.org/wiki/Markdown
// http://daringfireball.net/projects/markdown/
// -------------------------------------------------------------------
// Feel free to add more tags
// -------------------------------------------------------------------
mySettings = {
    onShiftEnter:       {keepDefault:false, openWith:'\n\n'},
    markupSet: [
        {name:'見出し1', key:'1', placeHolder:'ここにタイトルを入力', closeWith:function(markItUp) { return miu.markdownTitle(markItUp, '=') } },
        {name:'見出し2', key:'2', placeHolder:'ここにタイトルを入力', closeWith:function(markItUp) { return miu.markdownTitle(markItUp, '-') } },
        {name:'見出し3', key:'3', openWith:'### ', placeHolder:'ここにタイトルを入力' },
        //{name:'見出し4', key:'4', openWith:'#### ', placeHolder:'ここにタイトルを入力' },
        //{name:'見出し5', key:'5', openWith:'##### ', placeHolder:'ここにタイトルを入力' },
        //{name:'見出し6', key:'6', openWith:'###### ', placeHolder:'ここにタイトルを入力' },
        {separator:'---------------' },      
        {name:'強調', key:'B', openWith:'**', closeWith:'**'},
        {name:'斜体', key:'I', openWith:'_', closeWith:'_'},
        {separator:'---------------' },
        {name:'順不同リスト', openWith:'- ' },
        {name:'番号付リスト', openWith:function(markItUp) {
            return markItUp.line+'. ';
        }},
        {separator:'---------------' },
        {name:'画像', key:'P', replaceWith:'![[![Alternative text]!]]([![Url:!:http://]!] "[![Title]!]")'},
        {name:'リンク', key:'L', openWith:'[', closeWith:']([![Url:!:http://]!] "[![Title]!]")', placeHolder:'Your text to link here...' },
        {separator:'---------------'},   
        {name:'引用', openWith:'> '},
        {name:'コードブロック', openWith:'(!(\t|!|`)!)', closeWith:'(!(`)!)'},
        //{name:'コードブロック', openWith:'(!(```)!)', closeWith:'(!(```)!)'},
        {separator:'---------------'},
        {name:'プレビュー', call:'preview', className:"preview"}
    ]
}

// mIu nameSpace to avoid conflict.
miu = {
    markdownTitle: function(markItUp, char) {
        heading = '';
        n = $.trim(markItUp.selection||markItUp.placeHolder).length;
        // work around bug in python-markdown where header underlines must be at least 3 chars
        if (n < 3) { n = 3; }
        for(i = 0; i < n; i++) {
            heading += char;
        }
        return '\n'+heading;
    }
}

markitup/sets/markdown/style.css
{% load static %}
/* -------------------------------------------------------------------
// markItUp!
// By Jay Salvat - http://markitup.jaysalvat.com/
// ------------------------------------------------------------------*/


.markItUp a {
    width: 40px;
}

.markItUpButton {
    width: 25px;
    height: 25px;
    border: 1px solid #ddd;
    background-position: 50%;
    background-color: #fff;
    border-radius: 2px;
    margin-left: 2px;
    box-sizing: border-box;
}

.markItUpButton + .markItUpButton {
    border-left: 0;
    border-right: 1px solid #ddd;
}

.markItUp .markItUpButton1 a {
    background-image:url(images/h1.png);
}
.markItUp .markItUpButton2 a {
    background-image:url(images/h2.png);
}
.markItUp .markItUpButton3 a {
    background-image:url(images/h3.png);
}
/*
.markItUp .markItUpButton4 a {
   background-image:url(images/h4.png);
}
.markItUp .markItUpButton5 a {
   background-image:url(images/h5.png);
}
.markItUp .markItUpButton6 a {
   background-image:url(images/h6.png);
}
*/
.markItUp .markItUpButton4 a {
    background-image:url(images/bold.png);
}
.markItUp .markItUpButton5 a {
    background-image:url(images/italic.png);
}

.markItUp .markItUpButton6 a {
    background-image:url(images/list-bullet.png);
}
.markItUp .markItUpButton7 a {
    background-image:url(images/list-numeric.png);
}

.markItUp .markItUpButton8 a {
    background-image:url(images/picture.png);
}
.markItUp .markItUpButton9 a {
    background-image:url(images/link.png);
}

.markItUp .markItUpButton10 a   {
    background-image:url(images/quotes.png);
}
.markItUp .markItUpButton11 a   {
    background-image:url(images/code.png);
}

.markItUp .preview a {
    background-image:url(images/preview.png);
}
markitup/skins/markitup/style.css
/* -------------------------------------------------------------------
// markItUp! Universal MarkUp Engine, JQuery plugin
// By Jay Salvat - http://markitup.jaysalvat.com/
// ------------------------------------------------------------------*/
.markItUp * {
    margin:0px; padding:0px;
    outline:none;
}
.markItUp a:link,
.markItUp a:visited {
    color:#000;

    margin-top: 4px;
    margin-left:auto;
    margin-right:auto;
    text-decoration: 10px;
}
.markItUp  {
    width:700px;
    margin:5px 0 5px 0;
    /*border:5px solid #F5F5F5;    */
}
.markItUpContainer  {
    /*border:1px solid #3C769D;    */
    /*background:#FFF url(images/bg-container.png) repeat-x top left;*/
    /*padding:5px 5px 2px 5px;*/
    font:14px Verdana, Arial, Helvetica, sans-serif;
}
.markItUpEditor {
    /* font:12px 'Courier New', Courier, monospace; */
    /* padding:5px 5px 5px 35px; */
    /*border:3px solid #3C769D;*/
    border: 1px solid #ccc;
    border-radius: 0 0 5px 5px;
    width:643px;
    height:320px;
    /* background:#FFF url(images/bg-editor.png) no-repeat; */
    clear:both;
    line-height:18px;
    overflow:auto;
}
.markItUpPreviewFrame    {
    overflow:auto;
    background-color:#FFFFFF;
    border:1px solid #3C769D;
    width:99.9%;
    height:300px;
    margin:5px 0;
}
.markItUpFooter {
    width:100%;
    cursor:n-resize;
}
.markItUpResizeHandle {
    overflow:hidden;
    width:22px; height:5px;
    margin-left:auto;
    margin-right:auto;
    background-image:url(images/handle.png);
    cursor:n-resize;
}

.markItUpHeader {
    padding: 8px;
    height: 40px;
    border-top: 1px solid #ccc;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    border-radius: 4px 4px 0 0;
    background-color: #f5f5f5;
}

/***************************************************************************************/
/* first row of buttons */
.markItUpHeader ul li    {
    list-style:none;
    float:left;
    position:relative;
}
.markItUpHeader ul li ul{
    display:none;
}
.markItUpHeader ul li:hover > ul{
    display:block;
}
.markItUpHeader ul .markItUpDropMenu {
    /*background:transparent url(images/menu.png) no-repeat 115% 50%;*/
    background-color: #f5f5f5;
    margin-right:5px;
}
.markItUpHeader ul .markItUpDropMenu li {
    margin-right:0px;
}
.markItUpHeader ul .markItUpSeparator {
    margin-top:4px;
    margin:4px 10px;
    width:1px;
    height:16px;
    overflow:hidden;
    background-color:#CCC;
}
.markItUpHeader ul ul .markItUpSeparator {
    width:auto; height:1px;
    margin:0px;
}
/* next rows of buttons */
.markItUpHeader ul ul {
    display:none;
    position:absolute;
    top:18px; left:0px; 
    background:#F5F5F5;
    border:1px solid #3C769D;
    height:inherit;

}
.markItUpHeader ul ul li {
    float:none;
    border-bottom:1px solid #3C769D;
}
.markItUpHeader ul ul .markItUpDropMenu {
    background:#F5F5F5 url(images/submenu.png) no-repeat 100% 50%;
}
/* next rows of buttons */
.markItUpHeader ul ul ul {
    position:absolute;
    top:-1px; left:150px;
}
.markItUpHeader ul ul ul li {
    float:none;
}
.markItUpHeader ul a {
    display:block;
    width:16px; height:16px;
    text-indent:-10000px;
    background-repeat:no-repeat;
    padding:3px;
    margin:0px;

}
.markItUpHeader ul ul a {
    display:block;
    padding-left:0px;
    text-indent:0;
    width:120px; 
    padding:5px 5px 5px 25px;
    background-position:2px 50%;
}
.markItUpHeader ul ul a:hover  {
    color:#FFF;
    background-color:#3C769D;
}
/***************************************************************************************/
.html .markItUpEditor {
    background-image:url(images/bg-editor-html.png);
}
.markdown .markItUpEditor {
    background-image:url(images/bg-editor-markdown.png);
}
.textile .markItUpEditor {
    background-image:url(images/bg-editor-textile.png);
}
.bbcode .markItUpEditor {
    background-image:url(images/bg-editor-bbcode.png);
}
.wiki .markItUpEditor,
.dotclear .markItUpEditor {
    background-image:url(images/bg-editor-wiki.png);
}