Beberapa bulan yang lalu saya menerbitkan
posting pertama saya di Habré. Mungkin beberapa dari Anda akan melihat bahwa kode dalam artikel tersebut dilukis dengan cara yang tidak biasa, dan yang paling penting - diwarnai dengan benar, terlepas dari kenyataan bahwa editor teks bawaan di situs tidak mendukung markup asli kode dan sering menyoroti elemen-elemennya secara tidak benar. Pada saat yang sama, kode tersebut tidak dimasukkan oleh gambar, seperti yang dilakukan oleh beberapa penulis yang benar-benar putus asa.
Dalam kasus saya, melestarikan markup sangat penting, karena artikel tersebut adalah deskripsi cara bekerja pada kode. Untuk mengatasi masalah tersebut, saya membuat
alat yang memungkinkan Anda untuk mentransfer sorotan kode dalam skema yang dipilih dari IDEA ke sebuah artikel tentang Habr. Saya akan berbicara tentang proses membuat alat dan fitur penggunaannya.
Kenapa semua ini
Pada pandangan pertama, sepertinya ini dilakukan karena kerusakan, hanya karena penerangan standar yang diterapkan melalui tag
<source> tidak sesuai.
Di satu sisi, ini, tentu saja, benar, tetapi tidak cukup.
Pertama, penyorotan di dalam
<source> tidak dapat berfungsi dengan potongan kode, karena tidak akan ada informasi yang cukup untuk pewarnaan. Semua elemen yang dinyatakan di luar lingkup karya akan dicat secara acak. Masalah ini tidak memiliki solusi, karena, sejauh yang saya tahu, tidak ada layanan untuk pewarnaan online yang memungkinkan Anda melakukan salah satu dari yang berikut:
- Rekatkan kode proyek lengkap ke dalam artikel tanpa menampilkannya secara keseluruhan, atau tempel tautan ke komit di GitHub. Di tempat-tempat tertentu dalam artikel, gunakan kliping baris dari kode lengkap (dengan indikasi rentang). Dalam hal ini, lampu latar harus ditentukan berdasarkan kode lengkap, tentu saja.
- Tunjukkan informasi meta eksplisit untuk elemen yang tidak ditentukan. Cara yang cukup sulit bagi pengguna, tetapi saya akan setuju untuk hal seperti itu.
Kedua, penyorotan di dalam
<source> tidak pernah sama dengan jumlah berbagai jenis elemen dengan IDE biasa. Dan karena masalah yang dijelaskan di atas, membuat pewarnaan tingkat lanjut tidak masuk akal: tidak ada yang memasukkan kode proyek penuh ke dalam artikel, jadi fungsi ini tidak akan berfungsi.
Pada saat yang sama, kenyataannya adalah potongan-potongan kode perlu dimasukkan ke dalam artikel, dan semakin kecil, semakin baik.
Anda dapat membaca kode tanpa menyoroti, tetapi mengapa.
Fitur Habr
IntelliJ IDEA memiliki dukungan bawaan untuk mengekspor kode ke HTML. Menyalin kode secara teratur akan ditempatkan di clipboard, termasuk kode berwarna, yang dapat dibaca sebagai HTML.
Sayangnya, Habr tidak mengizinkan penggunaan markup HTML dalam artikel secara langsung. Alasan untuk ini adalah misteri yang tercakup dalam kegelapan, tetapi mungkin ini adalah karena penyatuan penampilan artikel. Jika Anda mengizinkan penggunaan HTML dalam artikel, akan mungkin untuk mengejar ketinggalan sehingga akan ada masalah dengan tampilan.
Saya umumnya mendukung gagasan pelarangan HTML dalam artikel, tetapi ada peringatan. Sebuah sumber daya untuk para profesional TI, di mana kode sering dibahas dan tidak ada cara untuk memasukkannya dengan benar ke dalam sebuah artikel, entah bagaimana aneh.
Jadi, kami memiliki tag pembuangan kami
<b> ,
<i> ,
<font> <i> <font> . Selain itu, semua ini berfungsi di dalam
<code> , yang diperlukan untuk memformat. Baiklah,
; Mereka juga menyelamatkan kami, yang berguna untuk baris panjang kode dan lekukan.
Tidak perlu dikatakan, semua cara standar untuk mendapatkan kode HTML dari IDEA tidak memberikan HTML sama sekali, sehingga pekerjaan konversi akan menjadi agak besar.
Pendekatannya
Untuk mulai dengan, ada baiknya mengucapkan terima kasih kepada penulis
capslocky untuk
materi tentang topik ini. Saya tidak menggunakan alat yang diusulkan dalam artikel secara langsung, dan itu hampir tidak akan terjadi, tetapi berkat materi ini saya memahami seluruh kedalaman masalah dan pada saat yang sama merasakan angin harapan.
Satu-satunya minus dari publikasi ini adalah sejumlah besar kode dikombinasikan dengan penjelasan yang sangat sedikit tentang apa yang dilakukannya dan mengapa.
Saya akan mencoba untuk memperbaiki situasi dan menjelaskan apa yang harus Anda lakukan dengan markup HTML Anda jika Anda ingin membawanya ke formulir yang siap untuk dimasukkan ke Habr.
- Sebelum mengekspor, Anda perlu mengatur skema warna yang diinginkan di IDEA, misalnya, dari situs web Tema Warna . Kode akan diekspor dengan skema yang dipilih. Lebih baik memilih skema dengan latar belakang putih (karena latar belakang tidak dapat ditetapkan pada Habré) dan tanpa menggarisbawahi. Saya tidak memikirkan betapa mudahnya menyeret mereka, karena saya tidak benar-benar menginginkannya.
- Kami hanya bekerja dengan internal
<pre> . Bahkan jika Anda menggunakan ekspor bukan dari IDEA, tetapi beberapa yang lain, mungkin akan ada tag ini di markup HTML, karena tanpa itu sulit untuk memformat kode dengan benar. Tag itu sendiri dihapus, menggantikannya dengan <code> . - Teks kemungkinan besar akan disajikan sebagai
<span> dengan gaya yang berbeda. Mereka semua harus singkirkan. Banyak layanan pewarnaan membawa gaya ke lembar gaya, yang logis, dan menggunakan tautan ke nama gaya. Secara khusus, IDEA belum melakukan ini, yang membuat tugas sedikit lebih mudah (pengaturan style terletak langsung di <span> ). - Atur warna font melalui
<font> . Sayangnya, warna latar belakang tidak dapat diatur. - Kami mengubah
font-style:italic properti font-style:italic menjadi sepasang <i> </i> , dan font-weight:bold menjadi <b> </b> . - Ganti semua ruang dengan
; . - Jeda baris dalam bentuk
<br> diganti dengan \n . - Markup HTML di IDEA menghasilkan garis-garis kosong dengan gaya dan spasi dari spasi dengan gaya. Lebih baik membuang gaya seperti itu: ini akan sangat mengurangi panjang dan meningkatkan kelengkapan kode.
- Pastikan bahwa umpan baris tidak memiliki gaya apa pun. Jika tidak, akan ada masalah dengan garis kosong.
Paragraf terakhir diilustrasikan oleh sebuah contoh:
<code>1 <font color="000000">2</code>Kode yang diberikan akan diubah oleh "Habr" dalam
12 . Hal yang sama berlaku untuk tag
<b> dan
<i> , serta kombinasi daripadanya. Jeda baris seharusnya tidak memiliki gaya, dan kemudian semuanya akan baik-baik saja.
Implementasi
Pada awalnya, tugas menulis konverter untuk kode HTML sewenang-wenang tampaknya agak rumit bagi saya. Namun, jika Anda membuat keputusan untuk versi HTML tertentu, maka semuanya tidak terlalu buruk. Saya berhasil melakukan segalanya pada RegExp murni, yaitu, bahkan tanpa parsing HTML. Masalah utama ternyata mengidentifikasi fitur markup "Habr".
Agar umpan baris tidak memiliki gaya, saya harus membuat penggantian yang agak rumit, yang mungkin merupakan yang paling tidak dapat dipahami (lihat fungsi popupBr). Idenya adalah bahwa tag
<br> setelah setiap penggantian "pop up" dari kedalaman tag format ke luar. Jadi, setelah semua penggantian, tag
<br> tidak lagi diformat.
Selain itu, ternyata IDEA tidak hanya menempatkan Rich Text di clipboard, tetapi juga objek yang agak rumit seperti
application/x-java-jvm-local-objectref . Masalahnya adalah bahwa keberadaan benda-benda seperti itu di clipboard menyebabkan kesalahan terus-menerus di konsol saya pada topik membangun DataFlavor. Sayangnya, tidak ada yang dapat Anda lakukan: JDK hanya bekerja dengan clipboard. Bagi saya, itu adalah penemuan untuk memiliki
kode seperti itu . Rupanya, paman pintar yang menulis ini percaya bahwa itu akan berhasil. Secara umum, jangan takut kesalahan yang mungkin terjadi saat bekerja dengan alat ini.
Proyek ini ditulis dalam Kotlin dan hidup di
GitHub .
Saran untuk perbaikan dipersilahkan! Sebagai contoh, alangkah baiknya mendesain alat ini sebagai plugin untuk IDEA. Saya belum menemukan cara sederhana untuk melakukan ini: sumber-sumber dari Salin sebagai plugin HTML, sayangnya, ditutup, dan terlalu lama untuk mengetahui bagaimana menulis plugin seperti itu dari awal.