wemark
1.0.0
ミニ プログラムは HTML レンダリングをネイティブにサポートしており、基本的に wemark を置き換えることができます。このライブラリは長い間荒廃しており、現在メンテナンスが行われていないため、注意して使用してください。
ミニ プログラムで Markdown テキストをレンダリングするために使用されます。
ミニ プログラムが誕生する前は、Markdown レンダリングでは一般に HTML に解析し、解析された HTML をレンダリングする必要がありました。ただし、ミニ プログラムには HTML レンダリング機能がありません。そのため、wemark が誕生する前は、ほとんどすべての Markdown レンダリング ライブラリがミニ プログラムで適切に動作できませんでした。
wemark は、小さなプログラムで Markdown コンテンツをレンダリングでき、画像や表を含むほとんどの Markdown 機能をサポートします。
rich-textを使用したレンダリングをサポートwemarkディレクトリをダウンロードして、ミニ プログラムのルート ディレクトリにコピーします。wemarkコンポーネントを参照する{
"usingComponents" : {
"wemark" : " ../wemark/wemark "
}
}<wemark md="{{md}}" link highlight type="wemark"></wemark>詳細なコードは
demoディレクトリにあります。これは完全な小さなプログラムの「コード スニペット」プロジェクトです。まず wemark ルート ディレクトリでnpm run copy実行し、それを WeChat 開発者の「コード スニペット」に追加します。経験のためのツール。
パラメータの説明:
md 、必須、レンダリングする必要があるマークダウン文字列。link 、リンクを解析するかどうか。解析された場合、ミニ プログラム内でジャンプできるミニ プログラムnavigatorコンポーネントを使用して表示されます。デフォルトはfalseです。highlight 、コードをハイライトするかどうか、デフォルトはfalseです。type 、レンダリング メソッド、 wemarkレンダリングにwemarkのデータ構造とテンプレートを使用し、 rich-textレンダリングにミニ プログラムに組み込まれているrich-textコンポーネントを使用します (リンク ジャンプとビデオはサポートされていません)。注: コードを強調表示すると、タグの数と解析されるデータの量が増加するため、レンダリングのパフォーマンスの問題が発生する可能性があります。実際のニーズに基づいて適切に使用してください。
Mpvue は、WeChat カスタム コンポーネントの導入をサポートしています。ページの.jsファイルに構成を追加し、 wemark参照して、 .vueファイルのtemplate部分で直接wemarkを使用できます。
export default {
config : {
// 这儿添加要用的小程序组件
usingComponents : {
wemark : '../../static/wemark/wemark'
}
}
} < wemark :md =" md " link highlight type =" wemark " > </ wemark >注: パッケージ化時に mpvue が
wemarkパッケージをdistディレクトリにパッケージ化できるようにするには、ソース コードのstaticディレクトリにwemark配置することをお勧めします。
このプロジェクトのmpvueディレクトリには、完全な mpvue アプレット デモ プロジェクトが含まれています。wemark wemarkディレクトリでnpm run copy実行し、WeChat 開発者ツールで開いて使用できます。
既存の taro プロジェクトに次の変更を加えます。
wemark srcディレクトリ、つまりsrc/wemarkディレクトリに置きます。wemarkディレクトリを設定し、 config/index.jsを修正し、 copy設定項目にwemarkを追加します。 参考は以下の通りです。 copy : {
patterns : [
{
from : 'src/wemark' ,
to : 'dist/wemark' ,
} ,
] ,
options : {
}
} ,remarkable.js無視するようにtaroを設定し、 config/index.js変更を続けます。 参照は次のとおりです。 weapp: {
compile : {
exclude : [
'src/wemark/remarkable.js' ,
]
} ,
...
}src/pages/index/index.jsなどのページでwemark導入して使用します。 config = {
navigationBarTitleText : '首页' ,
usingComponents : {
wemark : '../../wemark/wemark'
}
}
state = {
md : '# headingnnText'
}
//...
render ( ) {
return (
< View className = 'index' >
< wemark md = { this . state . md } link highlight type = 'wemark' />
</ View >
)
}global.d.tsに追加します (typescript プロジェクトのみ) declare namespace JSX {
interface IntrinsicElements {
wemark : any
}
}このプロジェクトのtaroディレクトリには、完全な taro アプレット デモンストレーション プロジェクトが含まれています。wemark wemarkディレクトリでnpm run copy実行し、WeChat 開発者ツールで開いて使用できます。
詳細については、#36 を参照してください。
npm install
npm test マサチューセッツ工科大学
wemark も使用している場合は、PR を送信して独自のミニ プログラムをリストに追加してください。
rich-textレンダリングのサポートvideo[poster]属性の使用のサポートwidthFixモードが使用され、高さが動的に計算されなくなりました #11 #12~~deleted~~ )
