タグ

Tipsとpreに関するlamichのブックマーク (2)

  • はてなダイアリー日記 - 入力したプログラムコードを色付けするスーパーpre記法 シンタックス・ハイライトの実装について

    日、入力したコードやはてな記法をそのまま表示するスーパーpre記法の拡張を行い、ソースコードや html などのシンタックス・ハイライトを行う機能を実装しました。これまではてなグループのみでお使いいただけた機能でしたが、ご好評をいただいたことによりはてなダイアリーでも実装いたしました。 シンタックス・ハイライトを行うには、ハイライトさせたいファイルタイプを、行頭の >|| の2のパイプ( || )の間に指定してください。例として >|ruby| class Foo def bar 'baz' # return baz end end ||<と記述すると class Foo def bar 'baz' # return baz end end とハイライトされて出力されます。 また、>|?| と || の間に ? を入力すると、自動で判別されハイライトされます。ただしほとんどの場合、一行

    はてなダイアリー日記 - 入力したプログラムコードを色付けするスーパーpre記法 シンタックス・ハイライトの実装について
  • pre 要素に対する印刷用 CSS

    サイトリニューアルと同時に印刷用スタイルも書いてみたんですが、ふと気がついたのは、pre 要素の中身って印刷するとき紙からはみ出しちゃって全部印刷できてないじゃんっていうこと。 Blog の記事を印刷する人ってそんなにはいないと思いますが、一応対策しておくかということで書いてみました。と言っても、別に目新しいことはしていませんので期待せずにお願いします。 さて、当サイトで使用している pre 要素には、画面表示用のスタイルとして、「overflow: scroll;」 を指定、改行せずにはみ出した部分はスクロールバーで表示させていますが、当然ながら印刷時はスクロールバーなんて出ないので、普通に紙からはみ出して終了と。 なので、印刷スタイルでは pre 要素を基的に整形済みテキスト (Preformatted Text) として表示しつつも、印刷領域からはみ出してしまう場合のみ適当に改行が

    pre 要素に対する印刷用 CSS
  • 1