استفاده از syntaxhighlight به همراه MVC

در مقاله به نحوه استفاده از syntaxhighlight در MVC خواهیم پرداخت امیدوارم که مورد استفاده دوستان قرار بگیرد

همانطور که در عکس زیر می بینید در بسیاری زمانها ممکن است نیاز داشته باشیم کدهای گذاشته شده در وبلاگ یا سایت به شکل زیبا تری نمایش پیدا کند

برای اینکار می توانیم از اسکریپت های آماده SyntaxHighlighter استفاده نمایید

آدرس سایت مربوطه:

http://alexgorbatchev.com/SyntaxHighlighter/download

برای اینکه بتوانید در MVC از این کامپوننت استفاده نمایید مراحل زیر را دنبال کنید

1) ابتدا یک پروژه MVC جدید بسازید

2) سپس می توانید با استفاده از Nuget ، فایلهای SyntaxHighlighter را بر روی پروژه خود نصب کنید.

برای نصب کافیست از منوی Tool -> Nuget Package Manager -> Package Manager Console را انتخاب کرده سپس کامند زیر را وارد نمایید

Install-Package SyntaxHighlighter 

برای اطلاعات بیشتر به این لینک مراجعه کنید https://www.nuget.org/packages/SyntaxHighlighter/

3) پس از نصب فایلهای مربوطه کافیست یک کنترل جدید ساخته و همچنین یک کلاس Model ساخته تا کار ارسال داده به سرور را ساده تر نماید

فایل نمونه برای نمایش نحوه کار ارسال می گردد

کدهای مربوط به فایل کنترلر

namespace MvcApplication1.Controllers
{
    public class HomeController : Controller
    {
        //
        // GET: /Home/

        public ActionResult Index()
        {
            var DisplayData = new DisplayData
            {
                Type = DisplayType.JsScript,
                DisplayCode = @"function foo()
{
    //This is the javascript function!
}"
            };
            ViewData["TypeString"] = DisplayData.TypeString;
            ViewData["DisplayCode"] = DisplayData.DisplayCode;
            return View();
        }

    }
}
کدهای مربوط به صفحه اچ تی ام ال مربوطه

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title</title>
    
    <script src="~/Scripts/SyntaxHighlighter/shCore.js"></script>
    <script src="~/Scripts/SyntaxHighlighter/shBrushCSharp.js"></script>
    <script src="~/Scripts/SyntaxHighlighter/shBrushJScript.js"></script>
    <link href="~/Content/SyntaxHighlighter/shCore.css" rel="stylesheet" />
    <link href="~/Content/SyntaxHighlighter/shThemeDefault.css" rel="stylesheet" />
</head>
<body>
     
        
    <pre class="@ViewData["TypeString"]">
         @ViewData["DisplayCode"]
</pre>

    <!-- Finally, to actually run the highlighter, you need to include this JS on your page -->
    <script type="text/javascript">
        SyntaxHighlighter.all()
    </script>

</body>

کدهای مربوط به کلاس مدل مربوطه


namespace MvcApplication1.Models
{
    public enum DisplayType { Default, JsScript }
    public class DisplayData
    {

        public string DisplayCode { get; set; }
        private DisplayType _type;
        public DisplayType Type
        {
            get
            {
                return _type;
            }
            set
            {
                _type = value;
                switch (value)
                {
                    case DisplayType.JsScript:
                        _typeString = "brush: js";
                        break;
                    case DisplayType.Default:
                        _typeString = null;
                        break;
                }
            }
        }
        private string _typeString;
        public string TypeString { get { return _typeString; } }


    }
}

 

فایل های ضمیمه