[Live Writer] SyntaxHighlighter code highlighting and syntaxhighlighter

[Live Writer] SyntaxHighlighter code highlighting and syntaxhighlighter
Preface

SyntaxHighlighter download: http://alexgorbatchev.com/SyntaxHighlighter/download/

SyntaxHighlighter configuration: http://alexgorbatchev.com/SyntaxHighlighter/manual/configuration/

Previously:

1. To use the SyntaxHighlighter plug-in to highlight code in the blog Park, you must first upload *. js... , *. Css ..., Then reference these js and css files in the settings, and then execute SyntaxHighlighter. all (); In js before using it in the pre label;

<pre class="brush:js;"></pre>

2. to highlight the code segment, switch to the html source code to modify the tag and set the class;

3. copying a piece of code is also quite complicated. It seems that clipboard.swf has not been studied much;

Now:

1. the blog has supported the SyntaxHighlighter plug-in by default, you can find the blog-common.js loaded in the blog (such as), so we do not need to upload those js, css files, you do not need to reference these files in the settings. You only need to use these files in the last step;

2. encapsulated as a plug-in. You only need to click it;

3. You can double-click to copy the code. It is not like the original highlighted code in the blog Park. After you click Copy code logo and enter the copy status, the Code cannot be switched back, double-click SyntaxHighlighter To Go To The textarea editing all-selected state. You can press Ctrl + C to copy the code and leave the textarea focus to switch the code highlight style;

Second body

The implementation is simple. The structure is the following sentence:

<pre class='{0}'>{1}</pre>

Add the highlight attribute setting at {0} and add the code to be highlighted at {1 (Convert <to <;.

Where,

For details about attribute settings, refer to Configuration on the official website and tick-free rain. All attribute settings are finally passed through "key: value ;..." Form combination placed at {0}, for example:

<pre class="brush: xml;html-script: false;quick-code: true;smart-tabs: true;auto-links: false;toolbar: false;gutter; true;light: false;ruler: false;pad-line-numbers: 2;collapse: false;tab-size: 4;first-line: 1;">&lt;pre class='{0}'&gt;{1}&lt;/pre&gt;</pre>

The highlighted code from {1} can be obtained directly from the clipboard or edited directly in the plug-in window. The final combination is spliced (such as the above Code) assign the value to the content mentioned in yesterday's article. After the release, you can see the code highlighting effect. 3. effect 1. Overall interface: 2. Supported languages include: 3. Other settings 4. The following figure shows the effect after the blog is published:

// Insert the code private void btnInsert_Click (object sender, EventArgs e) {try {m_Settings.Brush = cmbBrush. text; m_Settings.SyntaxHighlighterTitle = txtTitle. text; m_Settings.FirstLine = int. parse (txtFirstLine. text); m_Settings.Hightlight = txtHightlight. text; m_Settings.Collapse = chbCollapse. checked; m_Settings.Theme = cmbTheme. text; m_Settings.Save (); string code = txtCode. text; code = code. replace ("<", "<"); // Escape <symbol code = string. format (CommonHelper. syntaxHighlighterStructure, GetSettingStr (), code); m_Settings.PostBlogContent = code; m_Settings.PreviewContent = code; m_Settings.Save (); if (Closed! = Null) {Closed (DialogResult. OK) ;}} catch (Exception ex) {CommonHelper. ShowError (ex );}}

Iv. Final description

1. if you select "collapse code", you must select "toolbar" because the collapse title is on the toolbar. If the toolbar is not displayed, the collapse title is not displayed, at last, nothing is displayed on the interface;

2. Some property settings are not supported by the blog Park, such as "rsung". Others are interested in trying it on their own;

3. For browser compatibility problems, I use the cheetah browser, including the speed mode and IE compatibility mode,

When you use the IE compatibility mode and double-click the code to copy the code, the following scenario is displayed :(At this time, the line break is still present, so it does not affect the paste to other places.)

(Abnormal)

It is normal to switch to the speed mode, as shown below:

(Normal)

I really don't understand the newline problem in textarea. I haven't figured it out for a long time. I hope you can tell me what I know.

After testing, it is found that the document mode switched to 7, 8, and 9 in IE browser is normal, but not in other modes;

You need to switch to the speed mode during cheetah browsing, or switch the document mode to 7, 8, and 9 in F12, and switch the browser mode in F12 is invalid;

4. When you double-click to enter the textarea edit all mode, make sure that the Row Height in textarea is the same as that in the row height of the previous row number. You also need to set the style;

The default

. The Row height of syntaxhighlighter textarea is line-height: 1.1em! Important

. The line height of syntaxhighlighter. line is line-height: 1.8em! Important

Specifically, textarea will naturally be in the all-selected editing status after double-clicking, while line will be in the highlighted state, including the previous line height. The two lines are different by default, so I am bored, in this way, the double-click will result in the following effect:

It's totally asymmetrical. It's totally not in line with my aesthetic idea...

Add a line of high style definition to the "Page customization CSS code" in the blog Garden:

.syntaxhighlighter .line{  white-space: pre!important;  line-height: 1.5em!important;}.syntaxhighlighter textarea{  line-height: 1.5em!important;}

Finally, the compiled dll download link is attached:

Memento. OLW. dll

Note: copy the two dll files in the compressed packageC: \ Users \ User Folder \ AppData \ Local \ OpenLiveWriter \ app-0.6.0.0 \ PluginsDirectory. For source code, see "Fork me Coding" in the upper right corner ";