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

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+)で言語を表示するためのサポートが追加されました。

Source: https://habr.com/ru/post/J141976/


All Articles