SyntaxHighlighter 를 이용한 highlighting.
2017.09월 현재 해당 website 에서는 더이상 다운로드를 지원하지 않는다. 하지만 Googling 을 해보면 개인 블로그에서 많이 찾을수 있다.
1. 공식 사이트
http://alexgorbatchev.com/SyntaxHighlighter/
https://github.com/syntaxhighlighter/syntaxhighlighter
2. 다운로드
2. 다운로드 받은 Style 과 Script Tistory에 Upload
추가 (scripts 및 styles 하위에 있는 모들 파일) -> 저장
HTML 에 소스 추가
<script type="text/javascript" src="./images/shCore.js"></script>
<script type="text/javascript" src="./images/shLegacy.js"></script>
<script type="text/javascript" src="./images/shBrushBash.js"></script>
<script type="text/javascript" src="./images/shBrushCpp.js"></script>
<script type="text/javascript" src="./images/shBrushCSharp.js"></script>
<script type="text/javascript" src="./images/shBrushCss.js"></script>
<script type="text/javascript" src="./images/shBrushDelphi.js"></script>
<script type="text/javascript" src="./images/shBrushDiff.js"></script>
<script type="text/javascript" src="./images/shBrushGroovy.js"></script>
<script type="text/javascript" src="./images/shBrushJava.js"></script>
<script type="text/javascript" src="./images/shBrushJScript.js"></script>
<script type="text/javascript" src="./images/shBrushPhp.js"></script>
<script type="text/javascript" src="./images/shBrushPlain.js"></script>
<script type="text/javascript" src="./images/shBrushPython.js"></script>
<script type="text/javascript" src="./images/shBrushRuby.js"></script>
<script type="text/javascript" src="./images/shBrushScala.js"></script>
<script type="text/javascript" src="./images/shBrushSql.js"></script>
<script type="text/javascript" src="./images/shBrushVb.js"></script>
<script type="text/javascript" src="./images/shBrushXml.js"></script>
<link type="text/css" rel="stylesheet" href="./images/shCore.css">
<link type="text/css" rel="stylesheet" href="./images/shThemeDefault.css">
<script type="text/javascript">
SyntaxHighlighter.all();
</script>
<body Onload="dp.SyntaxHighlighter.HighlightAll('code');">
3. 테스트 소스코드 작성
HTML 입력창에 아래 코스 추가
<textarea name="code" class="brush:csharp;"> <!-- language type 에 맞게 변경-->
using System;
using Android.App;
using Android.Content;
using Android.Content.PM;
using Android.Runtime;
using Android.Views;
using Android.Widget;
using Android.OS;
namespace Favlish.Droid
{
[Activity(Label = "Favlish.Droid", Icon = "@drawable/icon", Theme = "@style/MyTheme", MainLauncher = true, ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation)]
public class MainActivity : global::Xamarin.Forms.Platform.Android.FormsAppCompatActivity
{
protected override void OnCreate(Bundle bundle)
{
TabLayoutResource = Resource.Layout.Tabbar;
ToolbarResource = Resource.Layout.Toolbar;
base.OnCreate(bundle);
global::Xamarin.Forms.Forms.Init(this, bundle);
LoadApplication(new App());
}
protected override void OnActivityResult(int requestCode, Result resultCode, Intent data)
{
base.OnActivityResult(requestCode, resultCode, data);
}
}
}
</textarea>
미리보기
소스코드 지원 리스트
'Interest > Blog' 카테고리의 다른 글
| highlight sample (0) | 2017.09.25 |
|---|
okgood0412
소프트웨어 개발을 즐기는 사람 입니다.