在Pre 元素的PDF 匯出中保留CSS 樣式

在語法螢光筆提供將反白的程式碼儲存為PDF 的選項的情況下，保留CSS 樣式對於保留突出顯示程式碼的美觀和功能至關重要。

使用CSS 將Pre 元素儲存為PDF

要將pre 元素儲存為CSS 將Pre 元素儲存為PDF

要將pre 元素儲存為PDF，同時保留其CSS 樣式，請考慮以下方法:
建立一個新視窗
2. ：開啟一個新的瀏覽器視窗。
附加 HTML 和樣式
3. ：插入預先定義的 HTML元素，包括任何相關樣式，進入新視窗的文件正文。
焦點與列印
4. ：焦點在新視窗並啟動列印過程。
系統列印對話方塊

$("#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();
});

$("#save").click(function() { var text = $("#output")[0].outerHTML; // 擷取並附加 `style` 元素，或定義內嵌樣式 var styles = $("style")[0].outerHTML; var popup = window.open("", "popup"); popup.document.body.innerHTML = 文字樣式； 彈出視窗.focus(); 彈出視窗.print(); });

實作注意事項
• 確保 styles 變數包含與 pre 元素相關的樣式元素或內嵌樣式資訊。

結論

透過實施這些技術，您可以有效地將pre 元素保存為PDF，同時保留其CSS 樣式，從而使用戶能夠輕鬆地透過準確的演示來共享和存檔突出顯示的程式碼。