タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
ここのことです*1。 真ん中のカラムがコードの表示 (開発者ツールで見ると textarea にコードが入っている 目次 目次 シンタックスハイライトはどうしているのか？ 上に表示されている div ならその文字もマウスカーソルで選択できるはずでは？ なぜこうしたのか？ 困ることはないのか？ たしかこないだまでは普通に div ？ で、テキストをマウスカーソルでドラッグアンドドロップで選択したりするような感じだったはずだけど、最近？になって、選択できる部分は textarea になっていて、点滅するカーソルが出るので、キーボードでエディタのように移動・選択することができる (もちろん編集はできない *2 )。 選択範囲の一番右に白く点滅するカーソルが登場している シンタックスハイライトはどうしているのか？ textarea は部分的に色を変えるとかはできないはずだし、スタイルの様子を見ると
GitHub - panphora/overtype: The markdown editor that's just a textarea https://overtype.dev
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
HTMLのtextarea要素では、テキスト単位で色をつけたりイベントハンドリングしたりなどすることは、通常の方法では出来ないことは皆さんご存知かと思います。それを(擬似的に)可能にするライブラリを作成しました。 もしよろしければスター、使用した上でフィードバックなどいただけると非常にありがたいです。 Demo テキストを装飾したり(textareaに見えないかもしれないですがtextareaです)、 キャレットの位置にメニューを表示したり、 テキストにカーソルを乗せた時にTooltipを出したり、 アイデア次第で色々と出来ると思います(もちろん原理上不可能なことはありますが…)。 同様のことは、例えばSlateなどのライブラリを使用しても実現可能だと思いますが、こちらの方が断然軽量でバンドルサイズに何倍も差があります(現在約3.0kB gzipped)。なのでエディタライブラリを持ち出す
THE MARKDOWN EDITOR THAT'S A TEXTAREA OverType is a transparent textarea over rendered markdown. Plain text simplicity, WYSIWYG beauty, zero complexity. AN UNDER-ENGINEERED SOLUTION A SINGLE LAYER OF ABSTRACTION - A textarea over a preview div AN OPEN BOX - Read, understand, and modify the code WYSIWYG WITHOUT THE HAIR-PULLING - Everything just works, it's native
GitHub - shaoruu/typehere.app: ✎ A quick, simple, and powerful textarea
Most things are in the ctrl/cmd-K menu. I will call it cmd-K for this guide. Cmd-K uses fuzzy search. There are two types of things that cmd-K has: notes and commands. Notes are the notes you've created, commands are things like theme toggle, vim toggle, show/hide scrollbar, import/export, etc. Navigate in the Cmd-K menu by up/down arrows. Create a new note by typing the note title and run the cre
GitHub - wstaeblein/texthighlighter: Vanilla JS class to highlight search results in a textarea while maintaining the area's functionality
Vanilla JS class to highlight search results in a textarea while maintaining the area's functionality. Since one can't style the text in a textarea, as it is not HTML, this class comes to the rescue allowing you to highlight any text in a textarea. Such as in search results. No dependencies. No configuration. Just instantiate the class and call a method. Can be used in as many textareas as needed,
GitHub - inokawa/rich-textarea: A small customizable textarea for React to colorize, highlight, decorate texts, offer autocomplete and much more.
Styleable texts: Not just highlighting texts like similar libraries, this library also supports colorizing, decorating and more. Regex or any tokenizers can be used. Easy to interact with events: You can get caret position and can catch some mouse events on texts, which are useful to display something reflects user actions. Compatible with textarea: Except added features, this library is designed
GitHub - antonmedv/textarea: A minimalist text editor that lives in URL
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
GitHub - catnose99/use-chat-submit: React hook to handle chat textarea submit behaviors (Enter vs Mod+Enter) with IME-safe handling.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
によって、Range オブジェクトとして取得することが可能です。ここで取得した Range オブジェクト情報から selectedText.getRangeAt(0).getBoundingClientRect() で、選択した箇所の座標情報を取得することができます。 しかし、input タグや textarea タグの中のテキストを選択しても同じように Range オブジェクト情報は取得できません。空のオブジェクトが返却されてしまいます。 input タグや textarea タグではこの Range 情報を取得するメソッドはありません。 ※ しかし input , textarea タグ内のテキストに選択範囲を設定するメソッドはなぜかある HTMLInputElement: setSelectionRange() method この入力系DOM内の座標情報を取得するためにはどのような手
GitHub - WebReflection/highlighted-code: A textarea builtin extend to automatically provide code highlights based on one of the languages available via highlight.js
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
小ネタである。 昔よりは便利になったとはいえ、Gmailのメールとか掲示板の投稿とかをウェブブラウザ上で書くのはめんどくさい。Emacs上で書きたいのである。というか、Emacs以前に「メール」とか「掲示板」とかいう時点ですでに老害感が横溢しており我ながらびびった。 それはさておき、そういうとき一昔前だとウェブブラウザ側にEdit with Emacsというアドイン、Emacs側に edit-server.el というのを入れて使っていたのだが、設定が複雑で何かとうまく行かなかった覚えがある。これが最近だと、ブラウザ側はGhostTextアドイン、Emacs側にatomic-chromeを入れれば楽に実現できる。名前がatomでchromeって大丈夫なのかねという感じだが（Atomはディスコンになってしまったし）、AtomやChromeだけではなくEmacsにもMozilla Firefo
小ネタである。 昔よりは便利になったとはいえ、Gmailのメールとか掲示板の投稿とかをウェブブラウザ上で書くのはめんどくさい。Emacs上で書きたいのである。というか、Emacs以前に「メール」とか「掲示板」とかいう時点ですでに老害感が横溢しており我ながらびびった。 それはさておき、そういうとき一昔前だとウェブブラウザ側にEdit with Emacsというアドイン、Emacs側に edit-server.el というのを入れて使っていたのだが、設定が複雑で何かとうまく行かなかった覚えがある。これが最近だと、ブラウザ側はGhostTextアドイン、Emacs側にatomic-chromeを入れれば楽に実現できる。名前がatomでchromeって大丈夫なのかねという感じだが（Atomはディスコンになってしまったし）、AtomやChromeだけではなくEmacsにもMozilla Firefo
こんにちは、Ryohei（@ityryohei）です！ 本記事では、JavaScriptでtextareaの入力内容で高さを自動調整する方法をご紹介しています。 では、解説していきます。 本記事で作成するもの 本記事の内容で完成するものがこちら！textareaに値を入力していくと、スクロールバーが表示される行数になった場合にtextareaの高さが自動的に調整されるようになっています。実際に操作してみてください。 See the Pen 6153 by ryohei (@intotheprogram) on CodePen. 注意点としては、textareaの高さを右下の角からマウス等でリサイズすると、幅は維持できますが高さは入力内容に応じて自動で調整されます。その点だけご認識ください。 では、作成していきましょう！ textareaの要素を作成する HTMLでtextareaを作成しま
特殊文字をアンエスケープしたいと思って、もろもろ調べました。 Mozillaのサイトによると、 < 👉 < > 👉 > " 👉 " ' 👉 ' & 👉 &こちらの5文字が特殊文字として挙げられています。 developer.mozilla.org 最小の構成であれば、この5文字をreplaceすることでアンエスケープすればOKなのかもしれません。 念の為、他の人が作ったライブラリ、unescape-htmlというパッケージのソースを確認してみると、 'use strict' /** * un-escape special characters in the given string of html. * * @param {String} html * @return {String} */ module.exports = functio
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHubのコード表示部分はtextareaとbefore疑似要素でできている - hogashi.*
textareaをカスタマイズできるReact用のライブラリを作成しました
OverType - The Markdown Editor That's a Textarea
input, textarea中のキャレット座標 (カーソルの位置) を取得する
GmailなどのtextareaをEmacsで編集する - Qiita
GmailなどのtextareaをEmacsで編集する - mhatta's mumbo jumbo
【JavaScript】textareaの入力内容で高さを自動調整する
textareaを使ってHTMLの特殊文字をアンエスケープする 📝 - みかづきブログ・カスタム
x.com
crea.bunshun.jp
anond.hatelabo.jp
newscast.jp
aimi6.ub.geo.jp
onecall2ch.com