54 |
55 |
73 |
56 |
72 |
57 |
66 |
67 | 68 | You can also drag a markdown file over this Window. 69 | 70 |
71 | 58 |
59 | Welcome to the Markdown Viewer! 60 |
61 | 62 | 63 | Open Markdown File 64 | 65 |66 |
67 | 68 | You can also drag a markdown file over this Window. 69 | 70 |
74 |
89 |
90 |
91 |
92 |
93 |
94 |
95 |
96 |
97 |
98 |
--------------------------------------------------------------------------------
/MarkdownViewer/Resources/MarkdownGuide.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
75 |
87 |
88 |
38 |
86 |
87 |
--------------------------------------------------------------------------------
/MarkdownViewer/Resources/fa-arrow-circle-right.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cbsom/MarkdownViewer/e03d53e1bc82243a8d3affa37a2ca94b38710682/MarkdownViewer/Resources/fa-arrow-circle-right.png
--------------------------------------------------------------------------------
/MarkdownViewer/Resources/fa-search.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cbsom/MarkdownViewer/e03d53e1bc82243a8d3affa37a2ca94b38710682/MarkdownViewer/Resources/fa-search.png
--------------------------------------------------------------------------------
/MarkdownViewer/Resources/fonts/FontAwesome.otf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cbsom/MarkdownViewer/e03d53e1bc82243a8d3affa37a2ca94b38710682/MarkdownViewer/Resources/fonts/FontAwesome.otf
--------------------------------------------------------------------------------
/MarkdownViewer/Resources/fonts/fontawesome-webfont.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cbsom/MarkdownViewer/e03d53e1bc82243a8d3affa37a2ca94b38710682/MarkdownViewer/Resources/fonts/fontawesome-webfont.eot
--------------------------------------------------------------------------------
/MarkdownViewer/Resources/fonts/fontawesome-webfont.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cbsom/MarkdownViewer/e03d53e1bc82243a8d3affa37a2ca94b38710682/MarkdownViewer/Resources/fonts/fontawesome-webfont.ttf
--------------------------------------------------------------------------------
/MarkdownViewer/Resources/fonts/fontawesome-webfont.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cbsom/MarkdownViewer/e03d53e1bc82243a8d3affa37a2ca94b38710682/MarkdownViewer/Resources/fonts/fontawesome-webfont.woff
--------------------------------------------------------------------------------
/MarkdownViewer/Resources/fonts/fontawesome-webfont.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cbsom/MarkdownViewer/e03d53e1bc82243a8d3affa37a2ca94b38710682/MarkdownViewer/Resources/fonts/fontawesome-webfont.woff2
--------------------------------------------------------------------------------
/MarkdownViewer/Resources/images/ComputeIconSmall.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cbsom/MarkdownViewer/e03d53e1bc82243a8d3affa37a2ca94b38710682/MarkdownViewer/Resources/images/ComputeIconSmall.jpg
--------------------------------------------------------------------------------
/MarkdownViewer/Resources/images/Icon-sm.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cbsom/MarkdownViewer/e03d53e1bc82243a8d3affa37a2ca94b38710682/MarkdownViewer/Resources/images/Icon-sm.png
--------------------------------------------------------------------------------
/MarkdownViewer/Resources/images/Icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cbsom/MarkdownViewer/e03d53e1bc82243a8d3affa37a2ca94b38710682/MarkdownViewer/Resources/images/Icon.png
--------------------------------------------------------------------------------
/MarkdownViewer/Resources/images/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cbsom/MarkdownViewer/e03d53e1bc82243a8d3affa37a2ca94b38710682/MarkdownViewer/Resources/images/favicon.ico
--------------------------------------------------------------------------------
/MarkdownViewer/Resources/images/logo.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cbsom/MarkdownViewer/e03d53e1bc82243a8d3affa37a2ca94b38710682/MarkdownViewer/Resources/images/logo.ico
--------------------------------------------------------------------------------
/MarkdownViewer/Resources/scripts/app.js:
--------------------------------------------------------------------------------
1 | /*******************************************************************************************************
2 | NOTE: The controller class comes directly from the ChromiumWebBrowser object.
3 | It was registered to this browser instance by the main form constructor
4 | as an instance of the MarkdownViewer.PageController class.
5 | *******************************************************************************************************/
6 | 'use strict';
7 | const global = this;
8 | const State_Previewing = 0;
9 | const State_Editing = 1;
10 |
11 | class MarkdownViewer {
12 | constructor(global) {
13 | this.global = global;
14 | this.showingSideBySide = false;
15 | this.state = State_Previewing;
16 | this.initialize();
17 | }
18 |
19 | initialize() {
20 | if (!!controller.markdownFileName) {
21 | $('#h4MdPath').html(controller.markdownFileName);
22 | //Load the html converted from the markdown contained in Program.MarkdownText.
23 | $('#divContent').html(controller.getFormatted(controller.markdownText));
24 | $('#btnEditMarkdown').on('click', () => this.editMarkdown());
25 |
26 | //The html has loaded onto the page. We can now format the code sections.
27 | this.global.loadBrushes();
28 | SyntaxHighlighter.all();
29 |
30 | //If this function is being called by the controller, for example if a new file is being opened,
31 | //we want to make sure that we show the html preview - even if the user was in middle of editing the original file.
32 | if (this.state !== State_Previewing) {
33 | this.showFormatted();
34 | }
35 | }
36 | }
37 |
38 | editMarkdown() {
39 | //The MenuHandler class customizes the right-click menu according to the current state.
40 | controller.setBrowserState(State_Editing);
41 | this.state = State_Editing;
42 |
43 | //The SimpleMDE component loves textareas
44 | $('#divContent').html('');
45 |
46 | //Now that we have a textarea for it to eat, we can create the SimpleMDE component
47 | this.createEditor();
48 |
49 | $('#btnEditMarkdown').addClass('active').off('click');
50 | $('#btnShowFormatted').removeClass('active').one('click', () => this.showFormatted());
51 | $('#divMain').removeClass('container');
52 |
53 |
54 | //If the user was previously editing side-by-side before previewing, they probably want to go back to that.
55 | if (this.showingSideBySide === true) {
56 | this.showSideBySide(true);
57 | }
58 | }
59 |
60 | showFormatted() {
61 | //The MenuHandler class customizes the right-click menu according to the current state.
62 | controller.setBrowserState(State_Previewing);
63 | this.state = State_Previewing;
64 |
65 | if (this.simplemde) {
66 | //We are changing from editing to viewing: copy the contents of the editor back into the controller.
67 | //Note, this does not update the changes back to the physical file. Only controller.saveMarkdown() does that.
68 | controller.markdownText = this.simplemde.value();
69 |
70 | if (this.simplemde.isFullscreenActive()) {
71 | this.simplemde.toggleFullScreen();
72 | }
73 | }
74 | //We need to convert the markdown to html and load it into the page content.
75 | this.initialize();
76 |
77 | $('#btnShowFormatted').addClass('active').off('click');
78 | $('#btnEditMarkdown').removeClass('active').one('click', () => this.editMarkdown());
79 | $('#divMain').addClass('container');
80 |
81 | //Due to an issue with the simplemde side-by-side functionality, the body sometimes stays overflow:hidden even after the side-by-side is closed
82 | $('body').css('overflow', 'auto');
83 | }
84 |
85 | //Open a different Markdown file
86 | openFile() {
87 | controller.openMarkdown();
88 | }
89 |
90 | //Save the current Markdown as html
91 | saveAsHtml() {
92 | var html = `
93 |
94 | ${document.head.outerHTML}
95 | ${document.body.outerHTML}
96 | `.replace(/src *= *"scripts\\/gi, 'src="file://' + controller.resourcesDirectory + '\\scripts\\')
97 | .replace(/href *= *"styles\\/gi, 'href="file://' + controller.resourcesDirectory + '\\styles\\')
98 | .replace(/src *= *"images\\/gi, 'src="file://' + controller.resourcesDirectory + '\\images\\')
99 | .replace(/[^]+/, '');
100 | controller.saveHtml(html);
101 | }
102 |
103 | //Save the current Markdown file as...
104 | saveAsMarkdown() {
105 | controller.saveAsMarkdown();
106 | }
107 |
108 | //Calls the browser components PrintToPdfAsync function
109 | printToPdf() {
110 | controller.printToPdf();
111 | }
112 |
113 | //Show Chromes DevTools
114 | showDevTools() {
115 | controller.showDevTools();
116 | }
117 |
118 | //You always need (at least) one of these
119 | showAbout() {
120 | alert(`
39 |
85 |
40 |
84 | Markdown Guide
41 |Emphasis
42 |**bold** 43 | *italics* 44 | ~~45 |strikethrough~~
Headers
46 |# Big header 47 | ## Medium header 48 | ### Small header 49 | #### Tiny header50 |
Lists
51 |* Generic list item 52 | * Generic list item 53 | * Generic list item 54 | 1. Numbered list item 55 | 2. Numbered list item 56 | 3. Numbered list item57 |
Links
58 |[Text to display](http://www.example.com)59 |
Quotes
60 |> This is a quote. 61 | > It can span multiple lines!62 |
Images Need to upload an image? Imgur has a great interface.
63 |64 |
Tables
65 || Column 1 | Column 2 | Column 3 | 66 | | -------- | -------- | -------- | 67 | | John | Doe | Male | 68 | | Mary | Smith | Female | 69 | Or without aligning the columns... 70 | | Column 1 | Column 2 | Column 3 | 71 | | -------- | -------- | -------- | 72 | | John | Doe | Male | 73 | | Mary | Smith | Female | 74 |75 |
Displaying code
76 |`var example = "hello!";` 77 | Or spanning multiple lines... 78 | ``` 79 | var example = "hello!"; 80 | alert(example); 81 | ```82 | 83 |
121 | Markdown Viewer
122 | ${controller.version()}
123 | 124 | ... view Markdown as it was meant to be viewed ... 125 |
A clean and quick Markdown file viewer for Windows.126 |
127 | 
Compute Software Solutions©
`, 'info');
128 | }
129 |
130 | //The PageController calls this function if the file we are viewing gets itself deleted.
131 | fileWasDeleted() {
132 | alert('The Markdown file has been deleted!', 'warning', 3);
133 | }
134 |
135 | //Create a SimpleMDEeditor component - cooked the way we like it
136 | createEditor() {
137 | this.simplemde = new SimpleMDE({
138 | element: $("#txtEditor")[0],
139 | autoDownloadFontAwesome: false,
140 | initialValue: controller.markdownText,
141 | toolbar: [{
142 | name: "save",
143 | action: (() => this.saveChanges()),
144 | className: "fa fa-floppy-o",
145 | title: "Save Changes"
146 | },
147 | //The fullscreen button will be hidden by the css. It was only added here to prevent errors in the side-by-side button
148 | "|", "bold", "italic", "strikethrough", "heading", "|", "quote", "unordered-list", "ordered-list", "|", "link", "image", "table", "fullscreen", "|",
149 | {
150 | name: "side-by-side",
151 | action: (() => this.showSideBySide()),
152 | className: "fa fa-columns",
153 | title: "Side by Side Editing"
154 | }, "|",
155 | {
156 | name: "guide",
157 | action: (() => this.showGuide()),
158 | className: "fa fa-question-circle",
159 | title: "Markdown Guide"
160 | }]
161 | });
162 | this.simplemde.codemirror.on("change",
163 | () => controller.markdownText = this.simplemde.value());
164 | }
165 |
166 | saveChanges() {
167 | if (controller.saveMarkdown()) {
168 | alert('The file has been successfully saved.', 'success', 2);
169 | }
170 | else {
171 | alert('The file could not be saved at this time.', 'warning');
172 | }
173 | }
174 |
175 | showSideBySide(show) {
176 | this.showingSideBySide = show || !this.simplemde.isSideBySideActive();
177 | if (typeof show === 'undefined' || show !== this.simplemde.isSideBySideActive()) {
178 | this.simplemde.toggleSideBySide();
179 | }
180 |
181 | //There are some issues with the simplemde side-by-side code.
182 | if (this.showingSideBySide && (!this.simplemde.isSideBySideActive())) {
183 | this.simplemde.toggleSideBySide();
184 | }
185 | }
186 |
187 | showGuide() {
188 | controller.showGuide();
189 | }
190 |
191 | find() {
192 | controller.toggleFind();
193 | }
194 |
195 | doKeyUp(evt) {
196 | var keyCode = evt.keyCode,
197 | ctrlKey = evt.ctrlKey,
198 | shiftKey = evt.shiftKey,
199 | altKey = evt.altKey,
200 | selectedText = this.global.getSelection().toString();
201 | this.global.setTimeout(function () {
202 | controller.doKeyUp(keyCode, ctrlKey, shiftKey, altKey, selectedText);
203 | }, 5);
204 | }
205 |
206 | version() {
207 | return controller.version();
208 | }
209 | }
210 |
211 | //Replace alert with a custom bootstrap styled one.
212 | global.alert = function (msg, type, selfCloseSeconds) {
213 | var types = ['success', 'info', 'warning', 'danger'],
214 | hasValidType = type && types.includes(type.toLowerCase()),
215 | iconHtml = '';
231 | $('#divAlertMessage').html(msg);
232 | $('#divAlert').modal('show')
233 | .removeClass(types.join(' '))
234 | .addClass(type)
235 | .find('.modal-title').html(iconHtml);
236 | if (selfCloseSeconds) {
237 | global.setTimeout(function () {
238 | $('#divAlert').modal('hide');
239 | }, selfCloseSeconds * 1000);
240 | }
241 | }
242 |
243 | $(function () {
244 | var mv = global.markdownViewer = new MarkdownViewer(global);
245 |
246 | $('.btnOpenMarkdown').on('click', () => mv.openFile());
247 | $('#btnSaveAsHtml').on('click', () => mv.saveAsHtml());
248 | $('#btnSaveAsMarkdown').on('click', () => mv.saveAsMarkdown());
249 | $('#btnSaveAsPDF').on('click', () => mv.printToPdf());
250 | $('#btnShowDevTools').on('click', () => mv.showDevTools());
251 | $('#btnAbout').on('click', () => mv.showAbout());
252 | $('#btnFind').on('click', () => mv.find());
253 | $('body').on('keyup', function (e) { mv.doKeyUp(e); });
254 | });
--------------------------------------------------------------------------------
/MarkdownViewer/Resources/scripts/shAutoloader.js:
--------------------------------------------------------------------------------
1 | /**
2 | * SyntaxHighlighter
3 | * http://alexgorbatchev.com/SyntaxHighlighter
4 | *
5 | * SyntaxHighlighter is donationware. If you are using it, please donate.
6 | * http://alexgorbatchev.com/SyntaxHighlighter/donate.html
7 | *
8 | * @version
9 | * 3.0.83 (July 02 2010)
10 | *
11 | * @copyright
12 | * Copyright (C) 2004-2010 Alex Gorbatchev.
13 | *
14 | * @license
15 | * Dual licensed under the MIT and GPL licenses.
16 | */
17 | eval(function(p,a,c,k,e,d){e=function(c){return(c Compute Software Solutions©