簡單的線上程式預覽實作

這陣子一直在開發專案上會用到的一些共用Library，一開始因提供給同事使用的方法不多，所以都以Blog文章為主來告知，但隨著開發的功能越來越多，感覺這樣的方法越來越不適用....如下有會幾種情況:
1.我不是每個功能都會寫Blog… 較小的功能就懶的寫..XD
2.照著文章作但跑不出該程式的功能.......PS:個人文筆不太好，有時會少寫XD
3.原本的功能更新了，但文章沒更新....
4.當團隊成員一多的時候，Tranining會佔去很多時間，且教了也不一定會記起來...

針對上述目前想到是直接寫一個共用方法的線上範例及預覽原始碼程式，讓成員可以直接執行該程式的結果及將相關代碼直接複製回去，雖不一定是最佳解法，但至少第一步可以不用問我，直接看範例也應該可以知道如何使用。

介紹前先來看一下成果

程式主要功能:

1.透過google-pretty來呈現原始碼,ps:可以顯示c#,html,js,css等等樣式
2.直接讀取程式檔案來顯示，這樣可以避免程式碼改了，而顯示端沒更新

相關作法如下:

1.加入程式碼預覽所需要的js,css

  <link href='http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css' type='text/css' rel='stylesheet' />
    <style>
        .bs-docs-example {
            position: relative;
            margin: 15px 5px;
            padding: 39px 19px 14px;
            *padding-top: 19px;
            background-color: #fff;
            border: 1px solid #ddd;
            -webkit-border-radius: 4px;
            -moz-border-radius: 4px;
            border-radius: 4px;
        }

            .bs-docs-example:after {
                content: "Code Example";
                position: absolute;
                top: -1px;
                left: -1px;
                padding: 3px 7px;
                font-size: 12px;
                font-weight: bold;
                background-color: #f5f5f5;
                border: 1px solid #ddd;
                color: #9da0a4;
                -webkit-border-radius: 4px 0 4px 0;
                -moz-border-radius: 4px 0 4px 0;
                border-radius: 4px 0 4px 0;
            }
    </style>

   <script src="http://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>
    <script src='http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js'></script>

2.建立顯示原始碼的類別

    public class ReadCodeModel
    {
        public ReadCodeModel(string filePath, string descript = null)
        {
            this.FilePath = filePath;
            this.Descript = descript;
        }

        public string FilePath { get; set; }

        public string FileName { get; set; }

        public string Descript { get; set; }

        public string Content { get; set; }
    }

    public class ReadCodeCollection : List<ReadCodeModel>
    {
        public ReadCodeCollection Add(string filePath, string descript = null)
        {
            ReadCodeModel m = new ReadCodeModel(filePath, descript);
            this.Add(m);
            return this;
        }
    }

3.建立PartialView，處理呼叫端傳進來的檔案路徑來讀取成字串，並將原始碼呈現

@model  CodePreviewLab.Models.ReadCodeCollection 
@{
    foreach (var model in Model)
    {
        string fullPath = Path.Combine(Request.PhysicalApplicationPath, model.FilePath);
        model.Content = System.IO.File.ReadAllText(fullPath);
        int sampleIndex = model.Content.IndexOf("@*Code-Example*@");
        if (sampleIndex > 0)
        {
            model.Content = model.Content.Substring(0, sampleIndex);
        }
            model.FileName = Path.GetFileName(model.FilePath);
    }
}
<div class="container">
    <div class="row clearfix">
        <div class="col-lg-12">
            <div class="bs-docs-example" style="text-align: justify;">
                <ul class="nav nav-tabs">
                    @{int i = 0;}
                    @foreach (var m in Model)
                    {
                        <li><a href="#tab_@i" data-toggle="tab">@m.FileName</a></li>
                        i++;
                    }
                </ul>
                <div class="tab-content">
                    @{i = 0;}
                    @foreach (var m in Model)
                    {
                        <div id="tab_@i" class="tab-pane">
                            <h3>@m.Descript</h3>
<pre class="prettyprint">@m.Content</pre>
                        </div>
                        i++;
                    }
                </div>
            </div>
        </div>
    </div>
</div>

4.以上完成後，將程式範例使用到的檔案路徑加入。ps:程式檔案要在iis上.

@{
    CodePreviewLab.Models.ReadCodeCollection models = new CodePreviewLab.Models.ReadCodeCollection();
    models.Add(@"Controllers\HomeController.cs", "Controller")
        .Add(@"Models\ReadCodeModel.cs", "Model")
           .Add(@"Views\Home\Index.cshtml", "View")
        .Add(@"Views\Shared\_LoginPartial.cshtml", "PartialView");
}
@Html.Partial("_ReadCode", models)

程式下載

https://github.com/kimx/CodePreviewLab/

參考文章

http://www.ewdna.com/2012/02/google-code-prettify.html

Search This Blog

Kim's Note