ChatGPT に対話的にマークアップを生成させてChrome拡張でプレビューする

2023/10/13 8 users React Component Chrome HTML 拡張

chat.openai.com 上でマークアップを試行錯誤するための Chrome 拡張を試作してみた。 例えば html+preview のコードブロックを見つけるとその隣に HTML として挿入する。後述するが React Component もプレビューできる。 📎 をクリックすると展開したHTMLを画像としてクリップボードに入れることができる。 いい感じに... 続きを読む

Zenn をやめることになったので、やったことを振り返ってみる

2023/09/22 6 users Zenn ゴー フロントエンドエンジニア 初め 機会

この記事について 私はこれまで Zenn のフロントエンドエンジニアとして働いてきましたが、2023/09 いっぱいで Zenn もといクラスメソッドをやめることになりましたので、この機会に Zenn でやってきたことを振り返ってみようかなと思います。 コードブロックのコピペ Zenn に入ってまず初めにやったことといえば、コー... 続きを読む

Markdown のコードブロックでLSPを動かす VSCode 拡張を作った

2023/08/24 10 users LSP Markdown TypeScript MDX 補完

これができる拡張を作った。 TypeScript と HTML と CSS の LSP を動かせるようにしたので、 markdown 内部で補完が走る。 TypeScript に関しては補完だけではなく型診断の結果を表示している。 .md だけではなく .mdx にも対応している。 インストールと設定 インストールした上で .vscode/settings.json に次の設定を... 続きを読む

RictyフォントとRicty Diminishedフォントが正式にサポート終了となった話 - Qiita

2023/02/01 117 users Qiita 欧文 Ricty 冒頭 文章

2023年1月現在、Qiitaのコードブロックでも採用されている有名な日本語対応プログラミング用フォントのRictyとRicty Diminishedが、2023年1月28日をもってサポート終了になりました。具体的には、配布ページの冒頭に、以下の文章が追加されています。 Ricty および Ricty Diminished は、2010 年代前半には欧文・和文合... 続きを読む

「Google ドキュメント」にソースコードを美しく整形・色分け表示する機能が追加／スマートキャンバス機能でコードブロックを設定可能に

2022/12/16 12 users 色分け 整形 ソースコード Google ドキュメント 設定

続きを読む

MarkdownやAsciidoc中に書いたJavaScriptのサンプルコードをdoctestするツールを書いた | Web Scratch

2019/09/02 30 users Markdown README Web scratch

技術書、ブログ、READMEを書いてていて、文章中に出てくるコードブロックのコードをテストしたいことがあると思います。 そのサンプルコードが本当に動いてるかどうかの不安になることがあるからです。 power-doctestは、そのコードブロック中のコードにコメントを入れるだけでテスト可能にするツール群です。 power-doc... 続きを読む

Chromeの開発者ツールを使って特定のDOM要素だけスクリーンショットする方法

2018/07/27 55 users DOM要素 Chrome スクリーン 特定 Qiita

特定のDOM要素のみスクショする機能がChromeにあるってことをさっき知りました。 大変便利だったので書き留めます。 元ネタ: Chrome DevTools: Capture the screenshot of a specific element /dev tips 特定DOM要素をスクショする方法 例えばQiitaのあるコードブロックだけ撮影したいとします。 Command + Shift + i で... 続きを読む

Markdown対応のプログラマー向けノートアプリ「Boostnote」がコードブロックのファイル名表示やURLのタイトル取得機能などをサポート。 | AAPL Ch.

2018/02/27 53 users Boostnote AAPL Markdown対応 URL

Markdown対応のプログラマー向けノートアプリ「Boostnote」がコードブロックのファイル名表示やURLのタイトル取得機能などをサポート。 2018/2/27 仕事効率化 Markdown＆クロスプラットフォーム対応のプログラマー向けノートアプリ「Boostnote v0.10.0」がリリースされています。詳細は以下から。 Boostnoteは福岡県のMAISIN&CO.株式会社がオープン... 続きを読む

PHP 7 でコードを書いたファーストインプレッション - Shin x Hatena Blog

2016/01/07 53 users ファーストインプレッション Markdown 素振り コード

2016 - 01 - 07 PHP 7 でコードを書いたファーストインプレッション 正月の書き初めとして、 PHP 7 でコードを書いてみました。 年始から始まるプロジェクトで PHP 7 に取り組む予定なので、素振りも兼ねています。実際に書いて感じたことを挙げてみます。 書いたコード 今回書いたのは、Markdown からコードブロックを抜き出して、それぞれをファイルに出力するコードです。 h... 続きを読む

QiitaでSwiftがハイライトできるようになりました - Qiita Blog

2014/06/12 23 users Qiita Swift シンタックスハイライト 知見 コード

Hooray! yuku_t です。 Appleが発表した新しいプログラミング言語「Swift」がQiitaでシンタックスハイライト可能になりました！ コードブロックの言語名に swift を指定すると… ハイライトされます！コードが綺麗に表示されると書きがいがぐんっと増しますね！ Swiftで遊んで得られた知見は是非Qiitaへ！ ただし、Swiftについての情報を発信する際は、それがApple... 続きを読む

Qiitaでコンソール(シェル)のコマンド実行を書くときとかのコードブロック - Qiita

2014/05/11 36 users Qiita None コンソール テキトー シェル

コードブロックは今までテキトーにshとかnoneとかしてて、ちょっとハイライトが変でも気にしてなかったんですが、あまりにも見た目が酷いときとかもあったんで、ホントにめんどくさがりなのでホントにめんどくさいんですが、いい加減ちゃんと確認しとこうかと思いました。ああめんどくさい。もっと楽して暮らしたい。お金がいっぱいほしい。 コンソール(シェル)のために指定するやつ たぶんこの用途で指定する言語は主に... 続きを読む