Bagaimana cara menampilkan kode javascript di situs web?

Question

Tingkatkan halaman web Anda ke level selanjutnya dengan memanfaatkan JavaScript. Pelajari di artikel ini cara memicu JavaScript langsung dari dokumen HTML Anda

Table of Contents Show

Tampilkan kode menggunakan sorotan. js
Menggunakan sorot. js di halaman web Anda
Menambahkan kode contoh ke halaman web Anda
Plugin Nomor Baris
Plugin Garis Sorot
Salin ke plugin Tombol Clipboard
Bagaimana cara menyematkan JavaScript ke situs web saya?
Bagaimana cara melihat kode js di browser?
Bagaimana cara menampilkan kode di situs web saya?
Bagaimana cara melihat kode sumber JavaScript di Chrome?

Prasyarat. Anda harus terbiasa dengan cara membuat dokumen HTML dasar. Objektif. Pelajari cara memicu JavaScript di file HTML Anda, dan pelajari praktik terbaik terpenting agar JavaScript tetap dapat diakses

JavaScript adalah bahasa pemrograman yang banyak digunakan di sisi klien untuk membuat halaman web menjadi interaktif. Anda dapat membuat halaman web yang luar biasa tanpa JavaScript, tetapi JavaScript membuka tingkat kemungkinan yang sama sekali baru

Catatan. Pada artikel ini kita akan membahas kode HTML yang Anda butuhkan untuk membuat JavaScript berfungsi. Jika Anda ingin mempelajari JavaScript itu sendiri, Anda bisa mulai dengan artikel dasar-dasar JavaScript kami. Jika Anda sudah mengetahui sesuatu tentang JavaScript atau jika Anda memiliki latar belakang dengan bahasa pemrograman lain, kami sarankan Anda langsung membuka Panduan JavaScript kami

Di dalam browser, JavaScript tidak melakukan apa pun dengan sendirinya. Anda menjalankan JavaScript dari dalam halaman web HTML Anda. Untuk memanggil kode JavaScript dari dalam HTML, Anda memerlukan elemen <script>. Ada dua cara untuk menggunakan script, bergantung pada apakah Anda menautkan ke skrip eksternal atau menyematkan skrip langsung di laman web Anda

Biasanya, Anda akan menulis skrip sendiri. file js. Jika Anda ingin mengeksekusi a. js dari halaman web Anda, cukup gunakan <script> dengan atribut src yang menunjuk ke file skrip, menggunakan URL-nya

<script src="path/to/my/script.js"></script>

Anda juga dapat menambahkan kode JavaScript di antara tag <script> daripada memberikan atribut src

<script>
  window.addEventListener("load", () => {
    console.log("This function is executed once the page is fully loaded");
  });
</script>

_

Itu nyaman ketika Anda hanya membutuhkan sedikit JavaScript, tetapi jika Anda menyimpan JavaScript dalam file terpisah, Anda akan merasa lebih mudah melakukannya

fokus pada pekerjaan Anda
menulis HTML mandiri
menulis aplikasi JavaScript terstruktur

Aksesibilitas adalah masalah utama dalam pengembangan perangkat lunak apa pun. JavaScript dapat membuat situs web Anda lebih mudah diakses jika Anda menggunakannya dengan bijak, atau bisa menjadi bencana jika Anda menggunakan scripting tanpa hati-hati. Agar JavaScript berfungsi sesuai keinginan Anda, ada baiknya mengetahui tentang praktik terbaik tertentu untuk menambahkan JavaScript

Dalam tutorial ini, Anda akan belajar cara menampilkan kode di blog/website Anda yang dapat disalin dan ditempel oleh pembaca dengan mudah. Kami juga akan membahas cara menyesuaikan tampilan kode dan memanfaatkan add-on seperti penomoran baris dan penyorotan baris

Tampilkan kode menggunakan sorotan. js

Menggunakan sorot. js di halaman web Anda

Menyorot. js adalah paket JavaScript yang memungkinkan Anda menambahkan kode contoh ke halaman web Anda. Menyorot. js adalah penyorot kode yang relatif sederhana dan tidak memungkinkan Anda menambahkan nomor baris atau menyorot baris kode (lihat apakah Anda memerlukan fungsionalitas ini); . Menyorot. js juga dilengkapi dengan tema yang memungkinkan Anda menyesuaikan tampilan kode yang Anda tampilkan. Tema siap pakai mencakup Android Studio, Github, dan kode Google, sehingga kode Anda dapat meniru banyak platform populer

Untuk menggabungkan sorotan. js ke halaman web Anda, kunjungi situs web mereka dan salin tautan jsdelivr CSS dan JavaScript siap pakai mereka ke elemen kepala file HTML Anda

Perhatikan bagaimana tautan ke stylesheet diakhiri dengan 'default. min. css'. Anda dapat mengubah tema kode contoh Anda dengan mengganti kata 'default' dengan salah satu gaya lain yang ditampilkan dalam demo ini. Jika nama tema menyertakan spasi, pastikan Anda menggantinya dengan tanda hubung. Misalnya, jika Anda ingin menggunakan tema Base 16 / Atelier Estuary maka ganti default. min. css dengan base16/atelier-muara. min. css. Setelah melakukan perubahan ini, elemen head akan menyukai ini

Setelah Anda menambahkan tautan ke lembar gaya CSS dan file JavaScript, hanya ada satu baris kode lagi yang perlu Anda tulis ke dalam elemen kepala halaman HTML Anda. Tambahkan skrip ini untuk mengaktifkan sorotan. js dan atur agar berfungsi pada kode contoh Anda

_

Secara keseluruhan, elemen kepala akan terlihat seperti ini

Menambahkan kode contoh ke halaman web Anda

Setelah halaman web Anda dilengkapi untuk menggunakan sorot. js, Anda dapat menambahkan kode contoh yang ingin Anda tunjukkan kepada pembaca Anda. Cukup tulis kode contoh di lokasi yang Anda pilih di dalam halaman HTML Anda dan lampirkan di dalam pembukaan

 and closing

_tag. Jika Anda penasaran, tag pra mengacu pada teks yang telah diformat sebelumnya dan tag kode menunjukkan bagian kode

Keuntungan menggunakan sorotan. js adalah dapat menyesuaikan pendekatan penyorotannya dengan bahasa pemrograman yang ingin Anda tampilkan. Untuk memberi tahu sorot. js bahasa pemrograman apa yang Anda gunakan, tambahkan teks 'bahasa-' diikuti dengan nama bahasa sebagai kelas di dalam pembukaan

3

_4

Daftar lengkap bahasa yang didukung dan kelas terkait dapat ditemukan di sini

'Escape' your example code to ensure it is read as text. You may notice when you load your webpage that your example code is invisible. This is likely because the web browser is reading your example code as HTML code instead of text. To resolve this, you must convert some of the symbols in your example code (e.g. <, >, & and ") to entities. An entity is a short sequence of letters and symbols that represents an item of punctuation. For example, " is the entity for the " symbol. While you could go through your example code and convert each punctuation symbol to an entity one by one, a much quicker way is to copy and paste your example code into an HTML escape tool. Once you have escaped your example code, you can copy it back into your HTML file between the opening and closing pre and code tags and it should now display correctly.

5

Dan itu saja. Asalkan Anda telah mengimpor 'prism. css' dan 'prisma. js' ke dalam file HTML dengan benar maka Anda harus berhasil menampilkan kode contoh di situs web Anda. Sisa dari tutorial ini akan mengeksplorasi beberapa plugin yang dapat Anda pilih kapan

Plugin Nomor Baris

Plugin Line Numbers memungkinkan Anda untuk menampilkan nomor baris dengan kode contoh Anda. Nomor baris tidak disertakan jika pembaca menyalin dan menempelkan kode

Untuk mengimplementasikan plugin Nomor Baris, pastikan itu dipilih saat Anda mengunduh. Nomor baris kemudian dapat diterapkan ke kode contoh Anda dengan menambahkan kelas 'nomor baris' ke tag 'pra' pembuka seperti ini





    Home
    
    
    


    My nature and wildlife blog

`Plugin Garis Sorot`

Plugin Line Highlight adalah cara yang baik untuk menarik perhatian ke baris tertentu dari kode contoh Anda

Untuk mengimplementasikan plugin Sorotan Garis, pertama-tama, pastikan itu dipilih saat Anda mengunduh. Anda kemudian dapat menyorot baris kode tertentu dengan menambahkan atribut data-line ke tag 'pra' pembuka. Untuk menyorot satu baris kode, kemudian atur atribut data-line ke nomor baris itu saja e. g. data-line="4". Berbagai garis dapat disorot sebagai berikut. data-line="2-6" dan kombinasi garis dan rentang tunggal dapat disorot seperti ini. data-line="2, 5-10, 14"

0

`Salin ke plugin Tombol Clipboard`

Prisma. js menawarkan plugin tombol Salin ke Clipboard yang menambahkan tombol ke kode contoh Anda dan memungkinkan pengguna untuk menyalin kode yang ditampilkan dengan satu klik

Jika Anda memilih plugin tombol Salin ke Papan Klip saat mengunduh prisma. js, maka secara otomatis akan berlaku untuk semua kode yang Anda tampilkan. Tidak ada lagi yang perlu Anda lakukan. Namun, Anda dapat menyesuaikan tombolnya. Misalnya, tombol memiliki tiga status

data-prismjs-copy - Keadaan istirahat default
data-prismjs-copy-error - Tombol telah diklik tetapi gagal menyalin teks ke clipboard pengguna
data-prismjs-copy-success - Tombol telah diklik dan teks berhasil disalin ke clipboard

Anda dapat mengubah pesan yang ditampilkan tombol di setiap status dengan mereferensikan properti yang relevan di tag kode pembuka. Misalnya, kita dapat membuat tombol salin yang menampilkan teks "Salin saya" dalam keadaan diam dan "Saya telah disalin. " dalam keadaan sukses dengan menulis kode berikut

0Anda juga dapat mengatur gaya tombol salin. Untuk melakukan ini, cukup modifikasi kelas tombol copy-to-clipboard di main. lembar gaya css. Misalnya, Anda dapat mengubah kursor pengguna menjadi simbol penunjuk daripada panah saat tombol diarahkan dengan menulis kode CSS berikut
 
Bagaimana cara menyematkan JavaScript ke situs web saya?
Untuk menyertakan file JavaScript eksternal, kita dapat menggunakan tag skrip dengan atribut src . Anda telah menggunakan atribut src saat menggunakan gambar. Nilai untuk atribut src harus berupa jalur ke file JavaScript Anda. Tag skrip ini harus disertakan di antara tag 
Bagaimana cara melihat kode js di browser?
Cara membuka dan menggunakan konsol JavaScript browser Anda . 
 Firefox. Bilah Menu > Alat > Pengembang Web > Konsol Web
 Chrome. Lihat> Pengembang>Alat Pengembang
 Safari. Menu Safari > Preferensi > Lanjutan > Kotak centang "Tampilkan Menu Kembangkan"> Kembangkan Menu > Tampilkan Konsol Kesalahan
 
Bagaimana cara menampilkan kode di situs web saya?
Cara Melihat Kode Sumber . 
 Firefox – CTRL + U (Artinya tekan tombol CTRL pada keyboard Anda dan tahan. Sambil menahan tombol CTRL, tekan tombol "u". ). 
 Internet Explorer - CTRL + U. Atau klik kanan dan pilih "View Source. "
 Chrome – CTRL + U. . 
 Opera – CTRL + U
 
Bagaimana cara melihat kode sumber JavaScript di Chrome?
Google Chrome . 
 Klik ikon menu. pada bilah alat browser
 Pilih Alat lainnya, lalu Lihat Sumber