HTML特殊文字変換｜コードをホームページに載せる時に便利 | すぐに使える便利なWEBツール | Tech-UnlimitedHTML特殊文字について ホームページ作成時、HTMLファイル内には「HTML」として特別な意味をもつ記号はそのまま表示されません。 例えば、「<（不等号）」はHTMLの開始タグと認識される為、HTML構造が崩れてページ全体として表示が崩れる場合があります。「半角スペース」はHTML上は無視される為に文字が詰まって表示されます。 このようなHTML特殊記号をホームページで表示させるには特殊文字に変換しておく必要があります。
Markdown-itのプラグインの作り方
先日、VSCode ではてなブログの記事を書きやすくするための拡張機能を作りました。 開発時のあれこれは別の記事にも書いています。 さて、VSCode 拡張機能の Markdown プレビューはextendMarkdownItという関数を定義するだけで拡張することが出来ます。 import * as vscode from 'vscode'; export function activate(context: vscode.ExtensionContext) { return { extendMarkdownIt(md: any) { return md.use(require('markdown-it-emoji')); } }; } "markdown-it-emoji"のようなプラグインを作って差し込むだけで、VSCode の Markdown を拡張できます。 これを使って拡張機能
React マークダウンを HTML 変換するライブラリ試してみた - かもメモ
マークダウンテキストを HTML 表示するライブラリ試してみたのでメモ 結論 React で使うなら React-markdown がシンプルで良さそう 調査経緯 ライブラリとしては marked >>> markdown-it > remark の順で使われている remark の内部で使われている remark-parse が圧倒的に多く使われている 最終更新は markdown-it > remark (remark-parse) > marked の順 marked は利用数は多いのですが最終アップデートが 11 年前なので、Markdown-it と Remark で検討することにしました Markdown-it Remark Project JavaScript TypeScript Star 14.5k 5.8k Last publish 7 months ago a yea
Convert PNG, JPG files to SVG vectors online - Vectorizer.AI
PICK Pick a bitmap image that you want to vectorize and drag and drop it onto the page. Bitmap images, such as JPEGs and PNGs, are represented as a grid of little squares called 'pixels', each with its own color. PROCESS We analyze, process, and convert your image from pixels to geometric shapes. The resulting vector image can be scaled to any resolution without getting blurry, and can be used to
続くAI大革命…イラストをベクター画像(線画データ)に変換する無料AIツールが高精度で凄い | オタク総研
ここ数ヶ月のAIの進展は凄まじく、毎日のように新たな魅力的なプロダクトが公開され世間をざわつかせているのはもはや言うまでもない。そんな中、最近よく耳にする音声AIやテキストAIとはまた違ったアプローチのAIツールが話題になっている。 それは通常の画像をラスター画像に高精度で変換してくれる「Vectorizer.AI」というもので、現在無料で利用することができる。 ベクター画像とは、フォントと同様に座標や数式で保存されており、それをもとに描画をするため、ラスター形式と呼ばれる通常のPNGやJPEGなどとは異なり「ぼけ」が生じず(理論上)無限に拡大することができることが特徴だ。本サービスはそんなベクター画像をAIを活用することでノイズやボケが含まれる低画質画像からでも生成することができるという。 今回は同じくAIを活用したキャラクターアイコン生成サービス「Waifulab」にて作成した画像（4
BASEのノーコードはどのように実現されているのか？ - BASEプロダクトチームブログ
基盤チームの右京です。 BASE ではショップのデザインを誰でも簡単にできるような、いわゆるノーコードな機能を提供しています。 デザイン | BASE (ベイス) ネットショップを無料で簡単に作成 この記事では、そんなノーコードなシステムの裏側について、簡単にですが解説しています。 ショップページ配信の基盤システム ノーコードの前にまず BASE のショップページ(ShopFront と呼んでいます)がどのようなシステムかを知っておく必要があります。BASE のショップページは特定の URL にアクセスすると必要なデータをデータベースから取得し、テンプレートエンジンを使ってサーバーのプログラムで HTML を生成して返す、よくある伝統的な Web ページとして実装されています。ただし、ショップ毎にページのデザインは全く異なるため、1 つの固定のテンプレートを利用しているわけではなく、ショッ
Vimで正規表現を使ってスネークケースとキャメルケースを相互変換する - 無理しない感じ
Vimでスネークケースとキャメルケースを相互に変換する方法を紹介します。 スネークケース -> キャメルケース 以下のような文字列を変換する hoge_fuga_piyo_foo_bar_baz コマンドラインモードで以下のように入力 :%s/\v_(.)/\u\1/g 結果 hogeFugaPiyoFooBarBaz スネークケース -> アッパーキャメルケース(パスカルケース) 以下のような文字列を変換する hoge_fuga_piyo_foo_bar_baz コマンドラインモードで以下のように入力 :%s/\v(^|_)(.)/\u\2/g 結果 HogeFugaPiyoFooBarBaz キャメルケース -> スネークケース 以下のような文字列を変換 hogeFugaPiyoFooBarBaz コマンドラインモードで以下のように入力 %s/\v([a-z]\@=)([A-Z])/\
高速で Markdown を HTML に変換してくれる『markdown-wasm』を使ってみた
はじめに 今回は, MOONGIFT さんで紹介されていた『markdown-wasm』について紹介します. その名の通り WebAssembly を使っているとのことでかなり高速で動くみたいです. まだ細かい検証はできていないんですが, 備忘録として概要と導入方法について紹介します. 『markdown-wasm』とは？ 『markdown-wasm』は, C のコードを WebAssembly に移植した超高速な Markdown パーサーです. 主な特徴は以下です. 依存関係なし(31 kB gzipped) どこでも実行ができ, かつ安全(WebAssembly なので分離されたメモリで実行できる) シンプルな API とても速い md4c(C で作られた Markdown parser) をベースに作られている - (CommonMark の仕様に準拠) 速度面では, 公式ページ
グーグルが開発した画像圧縮ツールSquoosh。フロント開発向けにNode.jsで扱う方法まとめ - ICS MEDIA
グーグルが開発した画像圧縮ツールSquoosh。フロント開発向けにNode.jsで扱う方法まとめ 『Squooshスクーシュ』というGoogleが開発した画像圧縮ウェブアプリがあります。ブラウザで変換結果を見ながら圧縮設定ができるので、画像圧縮の難しい知識を持たない方でも使いやすいことが特徴です。圧縮だけでなく、WebPなどの各種フォーマットへの変換・リサイズといったこともできる便利ツールです。 このSquooshをNode.jsで扱える『libSquoosh』が存在します。libSquooshは大量の画像を一括で圧縮、WebPへの変換、リサイズなどの処理をこれ1つで完結できるのがポイントです。昨今のウェブはページの読み込み時間が重視される傾向があります。画像のファイルサイズは読み込み時間に大きく影響するため、画像圧縮は重要なテクニックです。libSquooshをwebpack・Viteと
[HTML5] Canvasを画像に変換しサーバへ送信する - ねこの足跡R
Canvasに描画した内容を画像としてサーバへ送信し、そのままサーバに保存してみます。 今回は入力したテキストがそのままCanvasに描画される簡単なサンプルを用意しました。文字色と背景色もおまけで変更できます。もう少し頑張るとバナー画像ジェネレーターとか作れそうですね。 サーバ側のプログラムはPHPを採用していますが、他の言語でも似たような処理になります。 Canvasの内容をサーバへ送信する 実行例 ソース HTML JavaScript PHP 解説 Canvasを画像として取り出す サーバへ送信する サーバでバイナリとして保存する 参考ページ Canvasの内容をサーバへ送信する 実行例 以下から実際のサンプルをお試しいただけます。 miku3.net 左側にあるテキストボックスへ入力するとその場でCanvasに反映されます。同様に文字色や背景色も指定したタイミングでCanvasが
![[HTML5] Canvasを画像に変換しサーバへ送信する - ねこの足跡R](https://cdn-ak-scissors.b.st-hatena.com/image/square/cd4ec00f9e7dc008c0692333e4281a83ea17d3a6/height=288;version=1;width=512/https%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fk%2Fkatsube%2F20231125%2F20231125045644.png)
JavaScriptでData URIからBlob(File)を作成する方法
2017/07/29 JavaScriptで、base64エンコードされたData URIの文字列からBlob(File)を作成する方法を紹介します。例えば、localStorageなどで画像をData URIで保存させて再訪時に取り出す時、Blobに変換して扱えたら何かと便利なことが多いです。 サンプルコード// 対象の文字列 var dataURI = "data:image/png;base64,iVBORw..." ; // "iVBORw..."をバイナリに変換 var byteString = atob( dataURI.split( "," )[1] ) ; // "image/png" var mimeType = dataURI.match( /(:)([a-z\/]+)(;)/ )[2] ; // バイナリからBlobを作成 for( var i=0, l=byteSt
wkhtmltopdf
What is it? wkhtmltopdf and wkhtmltoimage are open source (LGPLv3) command line tools to render HTML into PDF and various image formats using the Qt WebKit rendering engine. These run entirely "headless" and do not require a display or display service. There is also a C library, if you're into that kind of thing. How do I use it? Download a precompiled binary or build from source Create your HTML
elasticsearchで人名漢字の読みがな検索を行う - Qiita
TL;DR 漢字で保持しているユーザの名前をひらがな、カタカナでも検索できるようにします。 使ってみる 以下のURLにアクセスして、上部のサーチボックスから検索が行えます。 ログインするとよりたくさんの結果が返ります。お試しください。 環境 Elasticsearch v1.2.1 kuromoji for Elasticsearch v2.2.0 方針 kuromoji_tokenizerで形態素解析した単語の漢字部分を kuromoji_readingform(TokenFilter)でカタカナに変換してインデックスします。 変換のために別途人名辞書を作成しkuromoji_tokenizerのユーザ辞書に登録して漢字とカタカナの紐付けを行います。 ユーザ辞書はトークンと読みがなを１対１でしか紐づけできないので、word_delimiter(TokenFilter)を活用して１対Nで紐
PDFをWordやExcelに変換できるWebサービス『iLovePDF』【今日のライフハックツール】 | ライフハッカー・ジャパン
OSなど、環境が異なっていてもレイアウトが崩れることのないPDFは、いまやMicrosoft Officeファイルと並んで、使用頻度の高い文書形式になっています。 ところが、PDFは編集アプリがないと編集できないため、閲覧専用だと思っている人も少なくないでしょう。 そこで『iLovePDF』のご紹介です。 これは、ブラウザ上で使える無料のPDF編集サービス。手軽にPDFを編集できるので、ぜひチェックしてみてください。 PDFのページを結合、分割、並び替えScreenshot: 田中宏和見積書、納品書、請求書など、バラバラになっているPDFファイルを3ページの1ファイルにして保存したり、取扱説明書の一部のページだけを抜粋して保存したり、ページの並び替えをしたり…。 『iLovePDF』を使えば、PDFレジュメの作成、編集が自由自在。 紙の資料を綴じるように、手軽に必要なページだけを編さんした
ブラウザ上でPDF変換などを行えるWebツール「Acrobat web」を公開
ブラウザ上でPDFファイルの変換や圧縮、注釈の追加やページの並び替えなどの作業を行えるWebツール。別途アプリケーションなどを用意することなく、ファイルのドラッグ＆ドロップのみで作業を行うことができる。 関連記事 アドビ、M1 Macにネイティブ対応した「Premiere Pro」「Premiere Rush」「Audition」β版を提供開始 アドビは、動画編集ソフト「Premiere Pro」など3製品のApple M1プラットフォーム対応β版の提供を開始した。 Adobe LightroomがApple M1搭載Macにネイティブで対応 アドビは、同社製フォトレタッチソフト「Adobe Lightroom」のアップデートを発表。Apple M1搭載Mac、およびARMプロセッサ搭載Surface Pro Xにネイティブで対応する。 アドビ、「Adobe Premiere Rush」モ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【 nkf 】コマンド――文字コードと改行コードを変換する
【ml】と【g】一目でわかる食品別換算表と計算機！ - だんらんナビ
SVGcode
https://www.web-development-kb-ja.site/ja/javascript/%E3%83%87%E3%83%BC%E3%82%BFuri%E3%82%92%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%81%AB%E5%A4%89%E6%8F%9B%E3%81%97%E3%81%A6%E3%81%8B%E3%82%89formdata%E3%81%AB%E8%BF%BD%E5%8A%A0%E3%81%99%E3%82%8B/971681392/
住所を英語表記に簡単変換 - 君に届け！
