事前要素の PDF エクスポートでの CSS スタイルの保持

CSS スタイルを維持しながら、強調表示されたコードを PDF として保存するオプションを提供する構文ハイライターのシナリオでこれは、強調表示されたコードの美しさと機能を維持するために非常に重要です。

CSS を使用して Pre 要素を PDF として保存

CSS スタイルを維持しながら Pre 要素を PDF として保存するには、次のアプローチを検討してください。 :

1. 新しいウィンドウを作成: 新しいブラウザ ウィンドウを開きます。
2. HTML とスタイルを追加: プレの HTML を挿入します。関連するスタイルを含む要素を新しいウィンドウのドキュメント本文に追加します。
3. フォーカスして印刷: 新しいウィンドウにフォーカスし、印刷プロセスを開始します。
4. システム印刷ダイアログ: システム印刷ダイアログで、[ファイルに出力]オプションを選択して、強調表示されたコードを PDF として保存します。

コード例

$("#save").click(function() {
  var text = $("#output")[0].outerHTML;
  // retrieve and append `style` element, or define inline styling
  var styles = $("style")[0].outerHTML;
  var popup = window.open("", "popup");
  popup.document.body.innerHTML = text   styles;
  popup.focus();
  popup.print();
});

実装に関する考慮事項

• styles 変数に style 要素または pre 要素に関連するインライン スタイル情報が含まれていることを確認してください。
• CSS メディアを調整する

結論

これらの手法を実装すると、CSS スタイルを維持しながら pre 要素を PDF として効果的に保存できるため、ユーザーは簡単に強調表示されたコードを正確なプレゼンテーションで共有およびアーカイブします。