タグ

ブックマーク / blog.hog.as (3)

  • GitHubのコード表示部分はtextareaとbefore疑似要素でできている - hogashi.*

    ここのことです*1。 真ん中のカラムがコードの表示 (開発者ツールで見ると textarea にコードが入っている 目次 目次 シンタックスハイライトはどうしているのか? 上に表示されている div ならその文字もマウスカーソルで選択できるはずでは? なぜこうしたのか? 困ることはないのか? たしかこないだまでは普通に div ? で、テキストをマウスカーソルでドラッグアンドドロップで選択したりするような感じだったはずだけど、最近?になって、選択できる部分は textarea になっていて、点滅するカーソルが出るので、キーボードでエディタのように移動・選択することができる (もちろん編集はできない *2 )。 選択範囲の一番右に白く点滅するカーソルが登場している シンタックスハイライトはどうしているのか? textarea は部分的に色を変えるとかはできないはずだし、スタイルの様子を見ると

    GitHubのコード表示部分はtextareaとbefore疑似要素でできている - hogashi.*
    craf
    craf 2023/04/11
  • aタグで#topにリンクするとページ先頭にスクロールするのは仕様 - hogashi.*

    はてなエンジニア Advent Calendar 2022 - Hatena Developer Blog の 2023/1/5 の記事です。 id:hogashi です。 目次 目次 3行 こういうやつ 仕様を眺める 追記1: おまけ 追記2: id="top" な要素があるときは? 3行 a タグの href 属性に #top と書くと、クリックしてページの先頭にスクロールできる、という話をしているのを見て、 それって仕様なんだっけ、と思って調べたところ、 仕様でした こういうやつ クリックしてこのページの先頭にスクロールする <a href="#top">クリックしてこのページの先頭にスクロールする</a> 仕様を眺める MDN の a タグのページにちょろっと書いてあって、 HTML の仕様に定義されているよ、とある <a>: The Anchor element - HTML:

    aタグで#topにリンクするとページ先頭にスクロールするのは仕様 - hogashi.*
    craf
    craf 2023/01/05
  • Slackはハイライト部分をU+E000とU+E001で囲って表していそう - hogashi.*

    Slack は、メッセージのどこからどこまでハイライトするかを、 Unicode の私用領域 *1の U+E000 と U+E001 を使って表しているらしく、こういう HTML を glitch とかで書いて、 <html> <head> <meta property="og:title" content="Slackで&#xE000;タイトルをハイライト&#xE001;する" /> <meta property="og:description" content="Slackで&#xE000;説明&#xE001;も&#xE000;好きな部分をハイライト&#xE001;する" /> </head> </html> そのページを Slack で展開させたりすることで、好きな部分を勝手にハイライトできて面白い *2 *3。 ちなみに printf "\ue000寿司\ue001が光ったら成功"

    Slackはハイライト部分をU+E000とU+E001で囲って表していそう - hogashi.*
  • 1