ソースタグ入力ツールが登場

2年ぶりに、あるいはそれ以上で、Habrは不自然な振る舞いをしました。 誰も期待していませんでしたが、変更は入力フィールド(構文の強調表示用の言語を含むSOURCEタグの入力フィールド)で行われました。 同時に、以前に「ヘルプ」で説明されていたよりもはるかに多くの言語のサポートが登場しました。



これまでにサポートされている(16言語):

bash lisp scala tex

ruby python php perl

xml javascript html

lua java cpp c# sql








現在サポートされています(41言語):



bash - Bash

cs - C#

cpp - C++

css - CSS

diff - Diff*

html - HTML

xml - XML

java - Java

javascript - JavaScript

php - PHP

perl - Perl

python - Python

ruby - Ruby

sql - SQL

1c - 1C*

actionscript - ActionScript*

apache - Apache*

axapta - Axapta*

cmake - CMake*

coffeescript - CoffeeScript*

dos - DOS*

delphi - Delphi*

django - Django*

erlang - Erlang*

erlang_repl - Erlang REPL*

go - Go*

haskell - Haskell*

lisp - Lisp

lua - Lua

mel - MEL*

markdown - Markdown*

matlab - Matlab*

nginx - Nginx*

objectivec - Objective C*

rust - Rust*

scala - Scala

smalltalk - Smalltalk*

tex - TeX

vbscript - VBScript*

vhdl - VHDL*

vala - Vala*








ただし、このリストはHabrのツールチップで拡張されています(「許可されたhtmlタグ」)。 Fontタグがそこにないのは奇妙です。 (許可されていないことをだれにも伝えないでください。)アスタリスクは、このリストに新しい言語をマークし、最初にサイトで使用されている技術名を書き、右側にリストに表示されるユーザーの正しい記述名を示します。





バージョン0.83からのHabrAjaxユーザースクリプトで同じ言語のサポートを報告しない41の言語を同時にサポートすると、ニュースは不完全になります。 昨日は16の言語でCSSなしですべてが穏やかで平和でした。 世界はこれらの16言語よりも広いことを誰もが知ったので、新しいバージョンには41言語もあります。



メインリストには待望の「CSS」が追加され、残りの24個は追加リストの右側に隠れていました。 まず、これは新しいものですが、追加のリストを非表示にしませんでした。CODEボタンの上にマウスを移動すると、2つが同時に表示されます。 おそらくそれを非表示にする必要があり、おそらく、とにかく快適になります。 サイズが大きくなりすぎるのを防ぐため、最初のリストにある「太字」スタイルは削除されました。



リストは、現在の言語へのアクセスを改善するために再配置する必要がある場合があります。 まれな言語や死んだ言語を右側に削除しようとしました。 このトピックのリストに言語を配置する(または薬物について議論する)提案を楽しみにしています。



言語の強調表示を入力するためのスクリプトの使用



SOURCEタグで言語を選択するためのスクリプトがどのように機能するかを示します。 HabrAjaxユーザースクリプトZenCommentビルトインスタイルをインストールした後(スクリプト設定で「ZenCommentスタイル」アイテムを有効にし(右側のスクリプトアイコンをクリックするか、他の2つの方法があります)、ページ上のコメントがコンパクトなフォームで表示されます。 入力フィールドに新しい関数が表示されることに加えて、スクリプトは他の多くの可能性を提供します。入力フィールドの下端を移動し、  と入力します Ctrl +スペース、タブの入力、FONTおよびBlockquoteタグ(引用)、モーダルダイアログなしでアドレスの入力など -すべての説明はスクリプトページにあります。



スクリーンショットは、かなり狭いウィンドウで正常に作業できることを示しています。 この例には、750pxの幅のウィンドウがありました。 (このスクリーンショットの言語でメニューを表示するには、マウスを最初に「<CODE>」という碑文に移動しました。)



ZenCommentなしでコメントがどのように見えるか見てみましょう。 見栄えは悪くなりますが、訪問者の90%にとっては使い慣れています。





通常、コメントは垂直方向に多くのスペースを占めることがわかります。 フクシア色の背景による著者の鮮やかな強調表示は、著者のコメントのマークです(構文強調表示機能とは関係ありません)。 スクリーンショットは同じ狭いウィンドウで撮影されており、そのようなウィンドウでは、さまざまな言語がページに収まらないことが明らかです。ポップアップリストは、ページを制限するスタイルで「カット」されています。 ZenCommentスタイルはこの欠陥も修正しました。 それでも、950ピクセルからの大きなウィンドウ幅では、言語のリスト全体を完全に操作することもできます。



ドロップダウンリストを使用したソリューションとの違いは、リストをクリックする必要があることです。ここでは、マウスを動かすだけです。 リストの場合、入力フィールドの上に新しい要素が必要です。ここでは、リストは既存の要素に関連付けられています。 リスト全体を表示するには、まだ下にスクロールする必要があります。ここでは必要ありません。言語のリスト全体が目の前にあります。



同じ入力ボタンは、記事の作成や質問と回答のメッセージのスクリプトで機能します。

 :<select class="with-title" name="list" onchange="habraWYG.insertList(this);"> <option value="" class="title">:</option> <option value="ul">UL LI</option>
      
      





UPD :HabrAjax(0.832+)で言語を表示するためのサポートが追加されました。




All Articles